Merge pull request #66 from inkonchain/feat/managed-checkbox

feat: allow checkbox to be "untracked"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

src/components/Checkbox/Checkbox.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Checkbox, CheckboxProps, CheckboxLabel } from "./index";
 import { fn } from "@storybook/test";
 import { useEffect, useMemo, useState } from "react";
+import { ListItem } from "../ListItem";
 const meta: Meta<CheckboxProps> = {
   title: "Components/Checkbox",
   component: Checkbox,
@@ -118,3 +119,27 @@ export const NestingWithIndeterminateState: Story = {
     );
   },
 };
+
+/** If you want to use the Checkbox without it's own managed state, don't set `onChange` and simply pass `checked={value}`. */
+export const ManagedByAParentItem: Story = {
+  argTypes: {
+    onChange: {
+      control: false,
+    },
+  },
+  args: {},
+  render: (args) => {
+    const [checked, setChecked] = useState(args.checked);
+    useEffect(() => {
+      setChecked(args.checked);
+    }, [args.checked]);
+    return (
+      <ListItem
+        onClick={() => setChecked(!checked)}
+        iconLeft={<Checkbox {...args} checked={checked} onChange={undefined} />}
+      >
+        <div>Checkbox</div>
+      </ListItem>
+    );
+  },
+};

src/components/Checkbox/Checkbox.tsx

@@ -3,31 +3,41 @@ import { classNames } from "../../util/classes";
 import { InkIcon } from "../..";
 
 export interface CheckboxProps {
-  checked: boolean;
+  defaultChecked?: boolean;
+  checked?: boolean;
   indeterminate?: boolean;
-  onChange: (enabled: boolean) => void;
+  onChange?: (enabled: boolean) => void;
 }
 
 export const Checkbox: React.FC<CheckboxProps> = ({
   checked,
   indeterminate,
   onChange,
 }) => {
+  const Component = onChange ? HeadlessCheckbox : "span";
   return (
-    <HeadlessCheckbox
+    <Component
       checked={checked}
-      onChange={onChange}
       indeterminate={!checked && indeterminate}
+      onChange={(eventOrValue) => {
+        /* Only happens when we're using the HeadlessCheckbox component. If we are not, then we don't track changes. */
+        if (typeof eventOrValue === "boolean") {
+          onChange?.(eventOrValue);
+        }
+      }}
       className={classNames(
-        "ink:group ink:relative ink:flex ink:items-center ink:justify-center ink:size-3 ink:shrink-0 ink:cursor-pointer ink:rounded-xs ink:box-border",
+        "ink:group ink:relative ink:flex ink:items-center ink:justify-center ink:size-3 ink:shrink-0 ink:rounded-xs ink:box-border",
         "ink:transition-colors ink:transition-default-animation",
         "ink:bg-background-container ink:shadow-xs",
         "ink:ring-text-on-secondary ink:focus-visible:outline-none ink:focus-visible:text-on-primary ink:focus-visible:ring-2 ink:focus-visible:ring-offset-2",
         "ink:data-checked:bg-button-primary",
         "ink:data-indeterminate:bg-button-primary",
         "ink:flex ink:items-center",
-        "ink:text-button-primary ink:data-checked:text-text-on-primary ink:data-indeterminate:text-text-on-primary"
+        "ink:text-button-primary ink:data-checked:text-text-on-primary ink:data-indeterminate:text-text-on-primary",
+        "ink:cursor-pointer"
       )}
+      data-checked={checked ? "true" : undefined}
+      data-indeterminate={indeterminate ? "true" : undefined}
     >
       <div className="ink:absolute ink:inset-0 ink:flex ink:items-center ink:justify-center ink:box-border">
         <InkIcon.Check
@@ -44,6 +54,6 @@ export const Checkbox: React.FC<CheckboxProps> = ({
           "ink:animate-svg-path ink:in-data-indeterminate:animate-svg-path-start"
         )}
       />
-    </HeadlessCheckbox>
+    </Component>
   );
 };

src/components/Typography/Typography.stories.tsx

@@ -27,7 +27,7 @@ const meta: Meta<TypographyProps> = {
             args={{
               children: (
                 <div>
-                  ink-text-{variant}: The quick brown fox jumps over the lazy
+                  ink:text-{variant} - The quick brown fox jumps over the lazy
                   dog
                 </div>
               ),