@stackshift-ui/checkbox 6.0.11-beta.2 → 7.0.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/checkbox",
   "description": "",
-  "version": "6.0.11-beta.2",
+  "version": "7.0.0-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,20 +29,23 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.10-beta.2",
-    "@stackshift-ui/eslint-config": "6.0.10-beta.2"
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "classnames": "^2.5.1",
-    "@stackshift-ui/system": "6.0.11-beta.2",
-    "@stackshift-ui/scripts": "6.0.10-beta.2"
+    "lucide-react": "^0.468.0",
+    "@stackshift-ui/system": "6.1.0-beta.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0"
   },
   "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
-    "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11-beta.2"
+    "react-dom": "16.8 - 19"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/checkbox.test.tsx

@@ -1,4 +1,5 @@
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { afterEach, describe, test } from "vitest";
 import { Checkbox } from "./checkbox";
 
@@ -7,7 +8,36 @@ describe.concurrent("checkbox", () => {
 
   test("Common: Checkbox - test if renders without errors", ({ expect }) => {
     const clx = "checkbox-class";
-    render(<Checkbox className={clx} />);
-    expect(screen.getByTestId("label").classList).toBeDefined();
+    const { unmount } = render(<Checkbox aria-label="Test checkbox" className={clx} />);
+
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox.classList).toContain(clx);
+    expect(checkbox.ariaLabel).toBe("Test checkbox");
+    unmount();
+  });
+
+  test("Common: Checkbox - test if renders with correct state", ({ expect }) => {
+    const { unmount } = render(
+      <Checkbox data-testid="checked-checkbox" aria-label="Test checkbox" defaultChecked />,
+    );
+
+    const checkbox = screen.getByTestId<HTMLButtonElement>("checked-checkbox");
+    expect(checkbox.getAttribute("aria-checked")).toBe("true");
+    unmount();
+  });
+
+  test("Common: Checkbox - test if clicking checkbox changes state", async ({ expect }) => {
+    const user = userEvent.setup();
+    const { unmount } = render(
+      <Checkbox data-testid="unchecked-checkbox" aria-label="Test checkbox" />,
+    );
+
+    const checkbox = screen.getByTestId<HTMLButtonElement>("unchecked-checkbox");
+    expect(checkbox.getAttribute("aria-checked")).toBe("false");
+
+    await user.click(checkbox);
+
+    waitFor(() => expect(checkbox.getAttribute("aria-checked")).toBe("true"));
+    unmount();
   });
 });

package/src/checkbox.tsx

@@ -1,71 +1,32 @@
-import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
-import cn from "classnames";
-import type { ElementType, HTMLProps } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import * as React from "react";
 
-export type StyleVariants<T extends string> = Record<T, string>;
-type Variant = "primary";
-
-export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, "as"> {
-  required?: boolean;
-  name?: string;
-  ariaLabel?: string;
-  label?: string;
-  labelClass?: string;
-  item?: string;
-  variant?: Variant;
-  onChange?: () => void;
-  className?: string;
-  as?: ElementType;
-}
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
 
 const displayName = "Checkbox";
 
-export const Checkbox: React.FC<CheckboxProps> = ({
-  required = false,
-  name,
-  ariaLabel,
-  label,
-  labelClass,
-  item,
-  variant = "primary",
-  onChange,
-  className,
-  as = "label",
-  ...props
-}) => {
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => {
   const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  const commonStyle = "";
-  const primary = `${commonStyle}`;
-
-  const variants: StyleVariants<Variant> = {
-    primary,
-  };
-
-  const variantClass = variants[variant] ?? primary;
-  const defaultLabelClass = "flex gap-2 items-center";
-
   return (
     <Component
-      as={as}
-      htmlFor={item}
-      className={cn(defaultLabelClass, labelClass)}
-      {...props}
-      data-testid={displayName}>
-      <input
-        aria-label={ariaLabel || name}
-        className={cn(variantClass, className)}
-        name={name}
-        type="checkbox"
-        value={item}
-        required={required}
-        onChange={onChange}
-        id={item}
-        {...props}
-      />
-      {label || item}
+      as={CheckboxPrimitive.Root}
+      ref={ref}
+      className={cn(
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        className,
+      )}
+      {...props}>
+      <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+        <Check className="h-4 w-4" />
+      </CheckboxPrimitive.Indicator>
     </Component>
   );
-};
-
+});
 Checkbox.displayName = displayName;
+
+export { Checkbox };