@stackshift-ui/checkbox 6.0.11 → 6.1.0

package/dist/checkbox.d.ts

@@ -1,17 +1,4 @@
-import type { ElementType, HTMLProps } 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;
-}
-export declare const Checkbox: React.FC<CheckboxProps>;
-export {};
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as React from "react";
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/dist/checkbox.js

@@ -1 +1 @@
-"use strict";var k=Object.create;var o=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var V=(e,a)=>{for(var t in a)o(e,t,{get:a[t],enumerable:!0})},b=(e,a,t,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of L(a))!N.call(e,n)&&n!==t&&o(e,n,{get:()=>a[n],enumerable:!(s=v(a,n))||s.enumerable});return e};var P=(e,a,t)=>(t=e!=null?k(S(e)):{},b(a||!e||!e.__esModule?o(t,"default",{value:e,enumerable:!0}):t,e)),E=e=>b(o({},"__esModule",{value:!0}),e);var H={};V(H,{Checkbox:()=>d});module.exports=E(H);var l=require("@stackshift-ui/system"),m=P(require("classnames")),i=require("react/jsx-runtime"),p="Checkbox",d=({required:e=!1,name:a,ariaLabel:t,label:s,labelClass:n,item:r,variant:g="primary",onChange:f,className:x,as:h="label",...c})=>{var C;let{[p]:u=l.DefaultComponent}=(0,l.useStackShiftUIComponents)(),y="",T=(C={primary:y}[g])!=null?C:y;return(0,i.jsxs)(u,{as:h,htmlFor:r,className:(0,m.default)("flex gap-2 items-center",n),...c,"data-testid":p,children:[(0,i.jsx)("input",{"aria-label":t||a,className:(0,m.default)(T,x),name:a,type:"checkbox",value:r,required:e,onChange:f,id:r,...c}),s||r]})};d.displayName=p;0&&(module.exports={Checkbox});
+"use strict";var h=Object.create;var a=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(e,o)=>{for(var t in o)a(e,t,{get:o[t],enumerable:!0})},m=(e,o,t,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of u(o))!x.call(e,r)&&r!==t&&a(e,r,{get:()=>o[r],enumerable:!(c=k(o,r))||c.enumerable});return e};var f=(e,o,t)=>(t=e!=null?h(C(e)):{},m(o||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),R=e=>m(a({},"__esModule",{value:!0}),e);var y={};v(y,{Checkbox:()=>l});module.exports=R(y);var n=f(require("@radix-ui/react-checkbox")),d=require("lucide-react"),p=f(require("react")),i=require("@stackshift-ui/system"),s=require("react/jsx-runtime"),b="Checkbox",l=p.forwardRef(({className:e,...o},t)=>{let{[b]:c=i.DefaultComponent}=(0,i.useStackShiftUIComponents)();return(0,s.jsx)(c,{as:n.Root,ref:t,className:(0,i.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",e),...o,children:(0,s.jsx)(n.Indicator,{className:(0,i.cn)("flex items-center justify-center text-current"),children:(0,s.jsx)(d.Check,{className:"h-4 w-4"})})})});l.displayName=b;0&&(module.exports={Checkbox});

package/dist/checkbox.mjs

@@ -1 +1 @@
-import{a}from"./chunk-3O2SYB7X.mjs";export{a as Checkbox};
+import{a}from"./chunk-GHOTKBI3.mjs";export{a as Checkbox};

package/dist/chunk-GHOTKBI3.mjs

@@ -0,0 +1 @@
+import*as e from"@radix-ui/react-checkbox";import{Check as m}from"lucide-react";import*as i from"react";import{cn as t,DefaultComponent as f,useStackShiftUIComponents as d}from"@stackshift-ui/system";import{jsx as o}from"react/jsx-runtime";var r="Checkbox",p=i.forwardRef(({className:c,...a},s)=>{let{[r]:n=f}=d();return o(n,{as:e.Root,ref:s,className:t("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",c),...a,children:o(e.Indicator,{className:t("flex items-center justify-center text-current"),children:o(m,{className:"h-4 w-4"})})})});p.displayName=r;export{p as a};

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";var k=Object.create;var o=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var V=(e,a)=>{for(var t in a)o(e,t,{get:a[t],enumerable:!0})},b=(e,a,t,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of L(a))!N.call(e,n)&&n!==t&&o(e,n,{get:()=>a[n],enumerable:!(s=v(a,n))||s.enumerable});return e};var P=(e,a,t)=>(t=e!=null?k(S(e)):{},b(a||!e||!e.__esModule?o(t,"default",{value:e,enumerable:!0}):t,e)),E=e=>b(o({},"__esModule",{value:!0}),e);var H={};V(H,{Checkbox:()=>d});module.exports=E(H);var l=require("@stackshift-ui/system"),m=P(require("classnames")),i=require("react/jsx-runtime"),p="Checkbox",d=({required:e=!1,name:a,ariaLabel:t,label:s,labelClass:n,item:r,variant:f="primary",onChange:g,className:x,as:u="label",...c})=>{var C;let{[p]:h=l.DefaultComponent}=(0,l.useStackShiftUIComponents)(),y="",T=(C={primary:y}[f])!=null?C:y;return(0,i.jsxs)(h,{as:u,htmlFor:r,className:(0,m.default)("flex gap-2 items-center",n),...c,"data-testid":p,children:[(0,i.jsx)("input",{"aria-label":t||a,className:(0,m.default)(T,x),name:a,type:"checkbox",value:r,required:e,onChange:g,id:r,...c}),s||r]})};d.displayName=p;0&&(module.exports={Checkbox});
+"use strict";var h=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var v=(e,o)=>{for(var t in o)s(e,t,{get:o[t],enumerable:!0})},m=(e,o,t,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of k(o))!x.call(e,r)&&r!==t&&s(e,r,{get:()=>o[r],enumerable:!(c=u(o,r))||c.enumerable});return e};var f=(e,o,t)=>(t=e!=null?h(C(e)):{},m(o||!e||!e.__esModule?s(t,"default",{value:e,enumerable:!0}):t,e)),R=e=>m(s({},"__esModule",{value:!0}),e);var y={};v(y,{Checkbox:()=>l});module.exports=R(y);var n=f(require("@radix-ui/react-checkbox")),p=require("lucide-react"),d=f(require("react")),i=require("@stackshift-ui/system"),a=require("react/jsx-runtime"),b="Checkbox",l=d.forwardRef(({className:e,...o},t)=>{let{[b]:c=i.DefaultComponent}=(0,i.useStackShiftUIComponents)();return(0,a.jsx)(c,{as:n.Root,ref:t,className:(0,i.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",e),...o,children:(0,a.jsx)(n.Indicator,{className:(0,i.cn)("flex items-center justify-center text-current"),children:(0,a.jsx)(p.Check,{className:"h-4 w-4"})})})});l.displayName=b;0&&(module.exports={Checkbox});

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";import{a as e}from"./chunk-3O2SYB7X.mjs";export{e as Checkbox};
+"use strict";import{a as e}from"./chunk-GHOTKBI3.mjs";export{e as Checkbox};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/checkbox",
   "description": "",
-  "version": "6.0.11",
+  "version": "6.1.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",
-    "@stackshift-ui/eslint-config": "6.0.10"
+    "@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/scripts": "6.0.10",
-    "@stackshift-ui/system": "6.0.11"
+    "lucide-react": "^0.468.0",
+    "@stackshift-ui/scripts": "6.1.0",
+    "@stackshift-ui/system": "6.1.0"
   },
   "peerDependencies": {
+    "@stackshift-ui/system": ">=7.0.0",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
-    "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11"
+    "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 };

package/dist/chunk-3O2SYB7X.mjs

@@ -1 +0,0 @@
-import{DefaultComponent as f,useStackShiftUIComponents as x}from"@stackshift-ui/system";import o from"classnames";import{jsx as u,jsxs as T}from"react/jsx-runtime";var a="Checkbox",h=({required:l=!1,name:t,ariaLabel:i,label:m,labelClass:p,item:e,variant:c="primary",onChange:y,className:C,as:b="label",...n})=>{var r;let{[a]:d=f}=x(),s="",g=(r={primary:s}[c])!=null?r:s;return T(d,{as:b,htmlFor:e,className:o("flex gap-2 items-center",p),...n,"data-testid":a,children:[u("input",{"aria-label":i||t,className:o(g,C),name:t,type:"checkbox",value:e,required:l,onChange:y,id:e,...n}),m||e]})};h.displayName=a;export{h as a};