feat(checkbox): migration in progress

packages/components/badge/src/use-badge.ts

@@ -1,4 +1,5 @@
 import type {BadgeSlots, BadgeVariantProps, SlotsToClasses} from "@nextui-org/theme";
+import type {ReactNode} from "react";
 
 import {badge} from "@nextui-org/theme";
 import {HTMLNextUIProps, mapPropsVariants} from "@nextui-org/system";
@@ -14,11 +15,11 @@ export interface UseBadgeProps extends HTMLNextUIProps<"span">, BadgeVariantProp
   /**
    * The children of the badge.
    */
-  children: React.ReactNode;
+  children: ReactNode;
   /**
    * The content of the badge. The badge will be rendered relative to its children.
    */
-  content?: string | number | React.ReactNode;
+  content?: string | number | ReactNode;
   /**
    * Classname or List of classes to change the styles of the element.
    * if `className` is passed, it will be added to the base slot.

packages/components/button/src/use-button.ts

@@ -153,6 +153,7 @@ export function useButton(props: UseButtonProps) {
   const getIconClone = (icon: ReactNode) =>
     isValidElement(icon)
       ? cloneElement(icon, {
+          // @ts-ignore
           "aria-hidden": true,
           focusable: false,
           tabIndex: -1,

packages/components/checkbox/package.json

@@ -39,7 +39,7 @@
   "dependencies": {
     "@nextui-org/system": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
-    "@nextui-org/shared-css": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
     "@nextui-org/dom-utils": "workspace:*",
     "@react-aria/checkbox": "^3.8.0",
     "@react-aria/focus": "^3.11.0",

packages/components/checkbox/src/checkbox.tsx

@@ -1,128 +1,59 @@
 import {forwardRef} from "@nextui-org/system";
-import {useFocusableRef} from "@nextui-org/dom-utils";
-import {clsx, __DEV__} from "@nextui-org/shared-utils";
-import {mergeProps} from "@react-aria/utils";
+import {__DEV__} from "@nextui-org/shared-utils";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 
-import {
-  StyledCheckbox,
-  StyledCheckboxContainer,
-  StyledCheckboxMask,
-  StyledCheckboxText,
-  StyledIconCheck,
-  StyledIconCheckFirstLine,
-  StyledIconCheckSecondLine,
-} from "./checkbox.styles";
 import {UseCheckboxProps, useCheckbox} from "./use-checkbox";
-import CheckboxGroup from "./checkbox-group";
 
-export interface CheckboxProps extends UseCheckboxProps {}
-
-type CompoundCheckbox = {
-  Group: typeof CheckboxGroup;
-};
-
-const Checkbox = forwardRef<CheckboxProps, "label", CompoundCheckbox>((props, ref) => {
-  const {className, as, css, children, label, ...checkboxProps} = props;
+export interface CheckboxProps extends Omit<UseCheckboxProps, "ref"> {}
 
+const Checkbox = forwardRef<CheckboxProps, "label">((props, ref) => {
   const {
-    size,
-    color,
-    state,
-    labelColor,
-    isRounded,
-    isHovered,
-    isFocusVisible,
-    lineThrough,
+    Component,
+    children,
+    isChecked,
     disableAnimation,
-    isIndeterminate,
-    inputRef,
-    inputProps,
-    pressProps,
-    hoverProps,
-    focusProps,
-    containerCss,
-    ...otherProps
-  } = useCheckbox({...checkboxProps, children: children ?? label});
-
-  const domRef = useFocusableRef(ref, inputRef);
+    getBaseProps,
+    getCheckboxProps,
+    getInputProps,
+    getIconProps,
+    getLabelProps,
+  } = useCheckbox({
+    ref,
+    ...props,
+  });
 
   return (
-    <StyledCheckbox
-      ref={domRef}
-      as={as}
-      className={clsx("nextui-checkbox", className)}
-      data-state={state}
-      {...mergeProps(hoverProps, pressProps, otherProps)}
-      css={css}
-      disableAnimation={disableAnimation}
-      isDisabled={inputProps.disabled}
-      size={size}
-    >
+    <Component {...getBaseProps()}>
       <VisuallyHidden>
-        <input
-          ref={inputRef}
-          className="nextui-checkbox-input"
-          {...mergeProps(inputProps, focusProps)}
-        />
+        <input {...getInputProps()} />
       </VisuallyHidden>
-      <StyledCheckboxContainer
-        className="nextui-checkbox-container"
-        color={color}
-        css={containerCss}
-        disableAnimation={disableAnimation}
-        isDisabled={inputProps.disabled}
-        isFocusVisible={isFocusVisible}
-        isHovered={isHovered}
-        isRounded={isRounded}
-        {...focusProps}
-      >
-        <StyledCheckboxMask
-          className="nextui-checkbox-mask"
-          disableAnimation={disableAnimation}
-          isChecked={inputProps.checked}
-          isIndeterminate={isIndeterminate}
-        >
-          <StyledIconCheck
-            className="nextui-icon-check"
-            disableAnimation={disableAnimation}
-            isChecked={inputProps.checked}
-            isIndeterminate={isIndeterminate}
-            size={size}
-          >
-            <StyledIconCheckFirstLine
-              className="nextui-icon-check-line1"
-              disableAnimation={disableAnimation}
-              isChecked={inputProps.checked}
-              isIndeterminate={isIndeterminate}
-            />
-            <StyledIconCheckSecondLine
-              className="nextui-icon-check-line2"
-              disableAnimation={disableAnimation}
-              isChecked={inputProps.checked}
-              isIndeterminate={isIndeterminate}
-            />
-          </StyledIconCheck>
-        </StyledCheckboxMask>
-      </StyledCheckboxContainer>
-      {(children || label) && (
-        <StyledCheckboxText
-          className="nextui-checkbox-text"
-          color={labelColor}
-          disableAnimation={disableAnimation}
-          isChecked={inputProps.checked}
-          isDisabled={inputProps.disabled}
-          lineThrough={lineThrough}
-        >
-          {children || label}
-        </StyledCheckboxText>
-      )}
-    </StyledCheckbox>
+      <span {...getCheckboxProps()}>
+        <svg aria-hidden="true" {...getIconProps()} role="presentation" viewBox="0 0 18 18">
+          <polyline
+            fill="none"
+            points="1 9 7 14 15 4"
+            stroke="currentColor"
+            strokeDasharray={22}
+            strokeDashoffset={isChecked ? 44 : 66}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={3}
+            style={
+              !disableAnimation
+                ? {
+                    transition: "all 350ms",
+                    transitionDelay: "200ms",
+                  }
+                : {}
+            }
+          />
+        </svg>
+      </span>
+      {children && <span {...getLabelProps()}>{children}</span>}
+    </Component>
   );
 });
 
-Checkbox.Group = CheckboxGroup;
-
 if (__DEV__) {
   Checkbox.displayName = "NextUI.Checkbox";
 }

packages/components/checkbox/src/index.ts

@@ -1,6 +1,13 @@
+import Checkbox from "./checkbox";
+import CheckboxGroup from "./checkbox-group";
+
+// export hooks
+export {useCheckbox} from "./use-checkbox";
+export {useCheckboxGroup} from "./use-checkbox-group";
+
 // export types
 export type {CheckboxProps} from "./checkbox";
 export type {CheckboxGroupProps} from "./checkbox-group";
 
-// export component
-export {default as Checkbox} from "./checkbox";
+// export components
+export {Checkbox, CheckboxGroup};

packages/components/checkbox/src/use-checkbox-group.ts

@@ -1,27 +1,43 @@
 import type {AriaCheckboxGroupProps} from "@react-types/checkbox";
-import type {NormalSizes, NormalColors, SimpleColors} from "@nextui-org/shared-utils";
 import type {Orientation} from "@react-types/shared";
 import type {HTMLNextUIProps} from "@nextui-org/system";
 
 import {useCheckboxGroup as useReactAriaCheckboxGroup} from "@react-aria/checkbox";
 import {CheckboxGroupState, useCheckboxGroupState} from "@react-stately/checkbox";
 
+import {CheckboxProps} from "./index";
+
 export interface UseCheckboxGroupProps extends HTMLNextUIProps<"div", AriaCheckboxGroupProps> {
   /**
    * The color of the checkboxes.
    * @default "default"
    */
-  color?: NormalColors;
-  /**
-   * The color of the label.
-   * @default "default"
-   */
-  labelColor?: SimpleColors;
+  color?: CheckboxProps["color"];
   /**
    * The size of the checkboxes.
    * @default "md"
    */
-  size?: NormalSizes;
+  size?: CheckboxProps["size"];
+  /**
+   * The radius of the checkboxes.
+   * @default "lg"
+   */
+  radius?: CheckboxProps["radius"];
+  /**
+   * Whether the checkboxes should have a line through.
+   * @default false
+   */
+  lineThrough?: CheckboxProps["lineThrough"];
+  /**
+   * Whether the checkboxes are disabled.
+   * @default false
+   */
+  isDisabled?: CheckboxProps["isDisabled"];
+  /**
+   * Whether the animation should be disabled.
+   * @default false
+   */
+  disableAnimation?: CheckboxProps["disableAnimation"];
   /**
    * The axis the checkbox group items should align with.
    * @default "vertical"
@@ -31,17 +47,23 @@ export interface UseCheckboxGroupProps extends HTMLNextUIProps<"div", AriaCheckb
 
 export type ContextType = {
   groupState: CheckboxGroupState;
-  color?: UseCheckboxGroupProps["color"];
-  labelColor?: UseCheckboxGroupProps["labelColor"];
-  size?: UseCheckboxGroupProps["size"];
+  color?: CheckboxProps["color"];
+  size?: CheckboxProps["size"];
+  radius?: CheckboxProps["radius"];
+  lineThrough?: CheckboxProps["lineThrough"];
+  isDisabled?: CheckboxProps["isDisabled"];
+  disableAnimation?: CheckboxProps["disableAnimation"];
 };
 
 export function useCheckboxGroup(props: UseCheckboxGroupProps) {
   const {
     size = "md",
-    color = "default",
-    labelColor = "default",
+    color = "neutral",
+    radius = "lg",
     orientation = "vertical",
+    lineThrough = false,
+    isDisabled = false,
+    disableAnimation = false,
     ...otherProps
   } = props;
 
@@ -52,7 +74,10 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
   const context: ContextType = {
     size,
     color,
-    labelColor,
+    radius,
+    lineThrough,
+    isDisabled,
+    disableAnimation,
     groupState,
   };
 

packages/components/checkbox/src/use-checkbox.ts

@@ -1,76 +1,79 @@
+import type {CheckboxVariantProps, CheckboxSlots, SlotsToClasses} from "@nextui-org/theme";
 import type {AriaCheckboxProps} from "@react-types/checkbox";
-import type {HTMLNextUIProps, CSS} from "@nextui-org/system";
+import type {HTMLNextUIProps} from "@nextui-org/system";
 
+import {ReactNode, Ref, useCallback} from "react";
 import {useMemo, useRef} from "react";
 import {useToggleState} from "@react-stately/toggle";
+import {checkbox} from "@nextui-org/theme";
 import {useHover, usePress} from "@react-aria/interactions";
 import {useFocusRing} from "@react-aria/focus";
-import {NormalSizes, NormalColors, SimpleColors, __DEV__, warn} from "@nextui-org/shared-utils";
+import {mergeProps} from "@react-aria/utils";
+import {useFocusableRef} from "@nextui-org/dom-utils";
+import {__DEV__, warn, clsx, dataAttr} from "@nextui-org/shared-utils";
 import {
   useCheckbox as useReactAriaCheckbox,
   useCheckboxGroupItem as useReactAriaCheckboxGroupItem,
 } from "@react-aria/checkbox";
+import {FocusableRef} from "@react-types/shared";
 
 import {useCheckboxGroupContext} from "./checkbox-group-context";
 
-export interface UseCheckboxProps extends HTMLNextUIProps<"label", AriaCheckboxProps> {
+export interface UseCheckboxProps
+  extends HTMLNextUIProps<"label", Omit<AriaCheckboxProps, keyof CheckboxVariantProps>>,
+    Omit<CheckboxVariantProps, "isFocusVisible"> {
   /**
-   * The content to display as the label.
+   * Ref to the DOM node.
    */
-  label?: string;
+  ref?: Ref<HTMLElement>;
   /**
-   * The color of the checkbox.
-   * @default "default"
-   */
-  color?: NormalColors;
-  /**
-   * The color of the label.
-   * @default "default"
-   */
-  labelColor?: SimpleColors;
-  /**
-   * The size of the checkbox.
-   * @default "md"
-   */
-  size?: NormalSizes;
-  /**
-   * Whether the checkbox is rounded.
+   * Whether the checkbox is disabled.
    * @default false
    */
-  isRounded?: boolean;
+  isDisabled?: boolean;
   /**
-   * Line in the middle of the label when the `Checkbox` is checked
-   * @default false
+   * The label of the checkbox.
    */
-  lineThrough?: boolean;
+  children?: ReactNode;
   /**
-   * Whether the checkbox has animations.
-   * @default false
+   * Classname or List of classes to change the styles of the element.
+   * if `className` is passed, it will be added to the base slot.
+   *
+   * @example
+   * ```ts
+   * <Checkbox styles={{
+   *    base:"base-classes",
+   *    wrapper: "wrapper-classes",
+   *    icon: "icon-classes",
+   *    label: "label-classes",
+   * }} />
+   * ```
    */
-  disableAnimation?: boolean;
-  /**
-   * Override checkbox container CSS style
-   */
-  containerCss?: CSS;
+  styles?: SlotsToClasses<CheckboxSlots>;
 }
 
 export function useCheckbox(props: UseCheckboxProps) {
   const groupContext = useCheckboxGroupContext();
+  const isInGroup = !!groupContext;
 
   const {
-    size = groupContext?.size ?? "md",
-    color = groupContext?.color ?? "default",
-    labelColor = groupContext?.labelColor ?? "default",
-    lineThrough,
+    as,
+    ref,
     isSelected,
     value = "",
-    isRounded = false,
+    children,
     isRequired = false,
-    disableAnimation = false,
+    size = groupContext?.size ?? "md",
+    color = groupContext?.color ?? "neutral",
+    radius = groupContext?.radius ?? "sm",
+    lineThrough = groupContext?.lineThrough ?? false,
+    isDisabled = groupContext?.isDisabled ?? false,
+    disableAnimation = groupContext?.disableAnimation ?? false,
     isIndeterminate = false,
     defaultSelected,
+    styles,
     onChange,
-    containerCss,
+    className,
     ...otherProps
   } = props;
 
@@ -89,7 +92,10 @@ export function useCheckbox(props: UseCheckboxProps) {
     }
   }
 
-  const inputRef = useRef<HTMLInputElement>(null);
+  const Component = as || "label";
+
+  const inputRef = useRef(null);
+  const domRef = useFocusableRef(ref as FocusableRef<HTMLLabelElement>, inputRef);
 
   const ariaCheckboxProps = useMemo(() => {
     return {
@@ -103,7 +109,7 @@ export function useCheckbox(props: UseCheckboxProps) {
     };
   }, [isIndeterminate, otherProps]);
 
-  const {inputProps} = groupContext
+  const {inputProps} = isInGroup
     ? // eslint-disable-next-line
       useReactAriaCheckboxGroupItem(
         {
@@ -128,38 +134,89 @@ export function useCheckbox(props: UseCheckboxProps) {
     isDisabled: inputProps.disabled,
   });
 
-  const {focusProps, isFocusVisible} = useFocusRing({
+  const {focusProps, isFocused, isFocusVisible} = useFocusRing({
     autoFocus: inputProps.autoFocus,
   });
 
-  const state = useMemo(() => {
-    if (isHovered) return "hovered";
+  const slots = useMemo(
+    () =>
+      checkbox({
+        color,
+        size,
+        radius,
+        lineThrough,
+        isDisabled,
+        isFocusVisible,
+        disableAnimation,
+        className,
+      }),
+    [color, size, radius, lineThrough, isDisabled, isFocusVisible, disableAnimation, className],
+  );
 
-    return isIndeterminate && inputProps.checked
-      ? "mixed"
-      : inputProps.checked
-      ? "checked"
-      : "uncheked";
-  }, [isHovered, isIndeterminate, inputProps.checked]);
+  const baseStyles = clsx(styles?.base, className);
+
+  const getBaseProps = () => {
+    return {
+      ref: domRef,
+      className: slots.base({class: baseStyles}),
+      "data-disabled": dataAttr(isDisabled),
+      "data-checked": dataAttr(inputProps.checked),
+      "data-invalid": dataAttr(otherProps.validationState === "invalid"),
+      ...mergeProps(hoverProps, pressProps, otherProps),
+    };
+  };
+
+  const getCheckboxProps = () => {
+    return {
+      "data-hover": dataAttr(isHovered),
+      "data-checked": dataAttr(inputProps.checked),
+      "data-focus": dataAttr(isFocused),
+      "data-focus-visible": dataAttr(isFocused && isFocusVisible),
+      "data-indeterminate": dataAttr(isIndeterminate),
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(otherProps.validationState === "invalid"),
+      "data-readonly": dataAttr(inputProps.readOnly),
+      "aria-hidden": true,
+      className: clsx(slots.wrapper({class: styles?.wrapper})),
+      ...mergeProps(hoverProps, pressProps, otherProps),
+    };
+  };
+
+  const getInputProps = () => {
+    return {
+      ref: inputRef,
+      ...mergeProps(inputProps, focusProps),
+    };
+  };
+
+  const getLabelProps = useCallback(
+    () => ({
+      "data-disabled": dataAttr(isDisabled),
+      "data-checked": dataAttr(inputProps.checked),
+      "data-invalid": dataAttr(otherProps.validationState === "invalid"),
+      className: slots.label({class: styles?.label}),
+    }),
+    [slots, isDisabled, inputProps.checked, otherProps.validationState],
+  );
+
+  const getIconProps = useCallback(
+    () => ({
+      "data-checked": dataAttr(inputProps.checked),
+      className: slots.icon({class: styles?.icon}),
+    }),
+    [slots, inputProps.checked],
+  );
 
   return {
-    size,
-    color,
-    state,
-    labelColor,
-    isRounded,
-    lineThrough,
+    Component,
+    children,
     disableAnimation,
-    isIndeterminate,
-    isFocusVisible,
-    isHovered,
-    inputRef,
-    inputProps,
-    pressProps,
-    hoverProps,
-    focusProps,
-    containerCss,
-    ...otherProps,
+    isChecked: inputProps.checked,
+    getBaseProps,
+    getCheckboxProps,
+    getInputProps,
+    getLabelProps,
+    getIconProps,
   };
 }
 

packages/components/checkbox/stories/checkbox.stories.tsx

@@ -1,243 +1,286 @@
-import React from "react";
-import {Meta} from "@storybook/react";
+import {ComponentStory, ComponentMeta} from "@storybook/react";
+import {checkbox} from "@nextui-org/theme";
 
-import {Checkbox} from "../src";
+import {Checkbox, CheckboxProps} from "../src";
 
 export default {
   title: "Inputs/Checkbox",
   component: Checkbox,
-} as Meta;
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        options: ["solid", "bordered", "light", "flat", "faded", "shadow", "dot"],
+      },
+    },
+    color: {
+      control: {
+        type: "select",
+        options: ["neutral", "primary", "secondary", "success", "warning", "danger"],
+      },
+    },
+    radius: {
+      control: {
+        type: "select",
+        options: ["none", "base", "sm", "md", "lg", "xl", "full"],
+      },
+    },
+    size: {
+      control: {
+        type: "select",
+        options: ["xs", "sm", "md", "lg", "xl"],
+      },
+    },
+    isDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+} as ComponentMeta<typeof Checkbox>;
 
-export const Default = () => {
-  return (
-    <Checkbox color="default" labelColor="default" size="md">
-      Option
-    </Checkbox>
-  );
+const defaultProps = {
+  ...checkbox.defaultVariants,
+  children: "Option",
 };
 
-export const Label = () => {
-  return <Checkbox color="default" label="Option" labelColor="default" size="md" />;
+const Template: ComponentStory<typeof Checkbox> = (args: CheckboxProps) => <Checkbox {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  ...defaultProps,
 };
 
-export const Disabled = () => (
-  <div style={{display: "flex", flexDirection: "column"}}>
-    <Checkbox defaultSelected size="xl">
-      Enabled
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected isDisabled size="xl">
-      Disabled
-    </Checkbox>
-  </div>
-);
+// export const Default = () => {
+//   return (
+//     <Checkbox color="default" labelColor="default" size="md">
+//       Option
+//     </Checkbox>
+//   );
+// };
 
-export const Sizes = () => (
-  <div style={{display: "flex", flexDirection: "column"}}>
-    <Checkbox defaultSelected size="xs">
-      mini
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected size="sm">
-      small
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected size="md">
-      medium
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected size="lg">
-      large
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected size="xl">
-      xlarge
-    </Checkbox>
-  </div>
-);
+// export const Label = () => {
+//   return <Checkbox color="default" label="Option" labelColor="default" size="md" />;
+// };
 
-export const Colors = () => (
-  <div style={{display: "flex", flexDirection: "column"}}>
-    <Checkbox defaultSelected color="primary">
-      Primary
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected color="secondary">
-      Secondary
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected color="success">
-      Success
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected color="warning">
-      Warning
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected color="error">
-      Error
-    </Checkbox>
-  </div>
-);
+// export const Disabled = () => (
+//   <div style={{display: "flex", flexDirection: "column"}}>
+//     <Checkbox defaultSelected size="xl">
+//       Enabled
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected isDisabled size="xl">
+//       Disabled
+//     </Checkbox>
+//   </div>
+// );
 
-export const LabelColors = () => (
-  <div style={{display: "flex", flexDirection: "column"}}>
-    <Checkbox defaultSelected color="primary" labelColor="primary">
-      Primary
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected color="secondary" labelColor="secondary">
-      Secondary
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected color="success" labelColor="success">
-      Success
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected color="warning" labelColor="warning">
-      Warning
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected color="error" labelColor="error">
-      Error
-    </Checkbox>
-  </div>
-);
+// export const Sizes = () => (
+//   <div style={{display: "flex", flexDirection: "column"}}>
+//     <Checkbox defaultSelected size="xs">
+//       mini
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected size="sm">
+//       small
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected size="md">
+//       medium
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected size="lg">
+//       large
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected size="xl">
+//       xlarge
+//     </Checkbox>
+//   </div>
+// );
 
-export const Rounded = () => (
-  <div style={{display: "flex", flexDirection: "column"}}>
-    <Checkbox defaultSelected isRounded color="primary">
-      Primary
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected isRounded color="secondary">
-      Secondary
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected isRounded color="success">
-      Success
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected isRounded color="warning">
-      Warning
-    </Checkbox>
-    <br />
-    <Checkbox defaultSelected isRounded color="error">
-      Error
-    </Checkbox>
-  </div>
-);
+// export const Colors = () => (
+//   <div style={{display: "flex", flexDirection: "column"}}>
+//     <Checkbox defaultSelected color="primary">
+//       Primary
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected color="secondary">
+//       Secondary
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected color="success">
+//       Success
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected color="warning">
+//       Warning
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected color="error">
+//       Error
+//     </Checkbox>
+//   </div>
+// );
 
-export const Indeterminate = () => {
-  return (
-    <Checkbox defaultSelected isIndeterminate color="primary" size="lg">
-      Option
-    </Checkbox>
-  );
-};
+// export const LabelColors = () => (
+//   <div style={{display: "flex", flexDirection: "column"}}>
+//     <Checkbox defaultSelected color="primary" labelColor="primary">
+//       Primary
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected color="secondary" labelColor="secondary">
+//       Secondary
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected color="success" labelColor="success">
+//       Success
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected color="warning" labelColor="warning">
+//       Warning
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected color="error" labelColor="error">
+//       Error
+//     </Checkbox>
+//   </div>
+// );
 
-export const LineThrough = () => {
-  return (
-    <Checkbox defaultSelected lineThrough color="primary" size="lg">
-      Option
-    </Checkbox>
-  );
-};
+// export const Rounded = () => (
+//   <div style={{display: "flex", flexDirection: "column"}}>
+//     <Checkbox defaultSelected isRounded color="primary">
+//       Primary
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected isRounded color="secondary">
+//       Secondary
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected isRounded color="success">
+//       Success
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected isRounded color="warning">
+//       Warning
+//     </Checkbox>
+//     <br />
+//     <Checkbox defaultSelected isRounded color="error">
+//       Error
+//     </Checkbox>
+//   </div>
+// );
 
-export const Controlled = () => {
-  const [selected, setSelected] = React.useState<boolean>(true);
+// export const Indeterminate = () => {
+//   return (
+//     <Checkbox defaultSelected isIndeterminate color="primary" size="lg">
+//       Option
+//     </Checkbox>
+//   );
+// };
 
-  const [groupSelected, setGroupSelected] = React.useState<string[]>(["buenos-aires", "sydney"]);
+// export const LineThrough = () => {
+//   return (
+//     <Checkbox defaultSelected lineThrough color="primary" size="lg">
+//       Option
+//     </Checkbox>
+//   );
+// };
 
-  React.useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log("Checkbox ", selected);
-  }, [selected]);
+// export const Controlled = () => {
+//   const [selected, setSelected] = React.useState<boolean>(true);
 
-  React.useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log("CheckboxGroup ", groupSelected);
-  }, [groupSelected]);
+//   const [groupSelected, setGroupSelected] = React.useState<string[]>(["buenos-aires", "sydney"]);
 
-  return (
-    <div style={{display: "flex", flexDirection: "row", gap: 200}}>
-      <Checkbox color="success" isSelected={selected} onChange={setSelected}>
-        Subscribe (controlled)
-      </Checkbox>
-      <Checkbox.Group
-        color="warning"
-        label="Select cities"
-        labelColor="primary"
-        value={groupSelected}
-        onChange={setGroupSelected}
-      >
-        <Checkbox color="primary" value="buenos-aires">
-          Buenos Aires
-        </Checkbox>
-        <Checkbox labelColor="warning" value="sydney">
-          Sydney
-        </Checkbox>
-        <Checkbox labelColor="error" value="london">
-          London
-        </Checkbox>
-        <Checkbox value="tokyo">Tokyo</Checkbox>
-      </Checkbox.Group>
-    </div>
-  );
-};
+//   React.useEffect(() => {
+//     // eslint-disable-next-line no-console
+//     console.log("Checkbox ", selected);
+//   }, [selected]);
 
-export const NoAnimated = () => {
-  return (
-    <div style={{display: "flex", flexDirection: "column"}}>
-      <Checkbox defaultSelected disableAnimation={true} size="md">
-        Option
-      </Checkbox>
-      <br />
-      <Checkbox defaultSelected lineThrough disableAnimation={true} size="md">
-        Option
-      </Checkbox>
-    </div>
-  );
-};
+//   React.useEffect(() => {
+//     // eslint-disable-next-line no-console
+//     console.log("CheckboxGroup ", groupSelected);
+//   }, [groupSelected]);
 
-export const Group = () => {
-  // eslint-disable-next-line no-console
-  const handleGroupChange = (value: string[]) => console.log(value);
+//   return (
+//     <div style={{display: "flex", flexDirection: "row", gap: 200}}>
+//       <Checkbox color="success" isSelected={selected} onChange={setSelected}>
+//         Subscribe (controlled)
+//       </Checkbox>
+//       <Checkbox.Group
+//         color="warning"
+//         label="Select cities"
+//         labelColor="primary"
+//         value={groupSelected}
+//         onChange={setGroupSelected}
+//       >
+//         <Checkbox color="primary" value="buenos-aires">
+//           Buenos Aires
+//         </Checkbox>
+//         <Checkbox labelColor="warning" value="sydney">
+//           Sydney
+//         </Checkbox>
+//         <Checkbox labelColor="error" value="london">
+//           London
+//         </Checkbox>
+//         <Checkbox value="tokyo">Tokyo</Checkbox>
+//       </Checkbox.Group>
+//     </div>
+//   );
+// };
 
-  return (
-    <Checkbox.Group
-      color="warning"
-      defaultValue={["buenos-aires"]}
-      label="Select cities"
-      labelColor="primary"
-      onChange={handleGroupChange}
-    >
-      <Checkbox color="primary" value="buenos-aires">
-        Buenos Aires
-      </Checkbox>
-      <Checkbox labelColor="warning" value="sydney">
-        Sydney
-      </Checkbox>
-      <Checkbox isDisabled labelColor="error" value="london">
-        London
-      </Checkbox>
-      <Checkbox value="tokyo">Tokyo</Checkbox>
-    </Checkbox.Group>
-  );
-};
+// export const NoAnimated = () => {
+//   return (
+//     <div style={{display: "flex", flexDirection: "column"}}>
+//       <Checkbox defaultSelected disableAnimation={true} size="md">
+//         Option
+//       </Checkbox>
+//       <br />
+//       <Checkbox defaultSelected lineThrough disableAnimation={true} size="md">
+//         Option
+//       </Checkbox>
+//     </div>
+//   );
+// };
 
-export const GroupRow = () => (
-  <Checkbox.Group
-    color="warning"
-    defaultValue={["1"]}
-    label="Select cities"
-    orientation="horizontal"
-  >
-    <Checkbox color="primary" value="1">
-      Buenos Aires
-    </Checkbox>
-    <Checkbox value="2">Sydney</Checkbox>
-    <Checkbox value="3">London</Checkbox>
-    <Checkbox value="4">Tokyo</Checkbox>
-  </Checkbox.Group>
-);
+// export const Group = () => {
+//   // eslint-disable-next-line no-console
+//   const handleGroupChange = (value: string[]) => console.log(value);
+
+//   return (
+//     <Checkbox.Group
+//       color="warning"
+//       defaultValue={["buenos-aires"]}
+//       label="Select cities"
+//       labelColor="primary"
+//       onChange={handleGroupChange}
+//     >
+//       <Checkbox color="primary" value="buenos-aires">
+//         Buenos Aires
+//       </Checkbox>
+//       <Checkbox labelColor="warning" value="sydney">
+//         Sydney
+//       </Checkbox>
+//       <Checkbox isDisabled labelColor="error" value="london">
+//         London
+//       </Checkbox>
+//       <Checkbox value="tokyo">Tokyo</Checkbox>
+//     </Checkbox.Group>
+//   );
+// };
+
+// export const GroupRow = () => (
+//   <Checkbox.Group
+//     color="warning"
+//     defaultValue={["1"]}
+//     label="Select cities"
+//     orientation="horizontal"
+//   >
+//     <Checkbox color="primary" value="1">
+//       Buenos Aires
+//     </Checkbox>
+//     <Checkbox value="2">Sydney</Checkbox>
+//     <Checkbox value="3">London</Checkbox>
+//     <Checkbox value="4">Tokyo</Checkbox>
+//   </Checkbox.Group>
+// );

packages/core/theme/src/components/checkbox.ts

@@ -0,0 +1,161 @@
+import {tv, type VariantProps} from "tailwind-variants";
+
+import {ringClasses} from "../utils";
+
+/**
+ * Checkbox wrapper **Tailwind Variants** component
+ *
+ * const {base, wrapper, icon, label} = checkbox({...})
+ *
+ * @example
+ * <label className={base())}>
+ *  // input
+ *  <span className={wrapper()} aria-hidden="true" data-checked={checked}>
+ *     <svg className={icon()}>
+ *       // check icon
+ *     </svg>
+ *  </span>
+ *  <span className={label()}>Label</span>
+ * </label>
+ */
+const checkbox = tv({
+  slots: {
+    base: "relative inline-flex items-center justify-start cursor-pointer",
+    wrapper: [
+      "relative",
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "flex-shrink-0",
+      "overflow-hidden",
+      // before
+      "before:content-['']",
+      "before:absolute",
+      "before:inset-0",
+      "before:border-solid",
+      "before:border-2",
+      "before:box-border",
+      "before:border-neutral",
+      // after
+      "after:content-['']",
+      "after:absolute",
+      "after:inset-0",
+      "after:scale-50",
+      "after:opacity-0",
+      "after:origin-center",
+      "data-[checked=true]:after:scale-100",
+      "data-[checked=true]:after:opacity-100",
+      // hover
+      "hover:before:bg-neutral",
+      "data-[hover=true]:before:bg-neutral",
+    ],
+    icon: "z-10 w-4 h-3 opacity-0 data-[checked=true]:opacity-100",
+    label: "ml-1 text-foreground",
+  },
+  variants: {
+    color: {
+      neutral: {
+        wrapper: "after:bg-neutral after:text-neutral-contrastText text-neutral-contrastText",
+      },
+      primary: {
+        wrapper: "after:bg-primary after:text-primary-contrastText text-primary-contrastText",
+      },
+      secondary: {
+        wrapper: "after:bg-secondary after:text-secondary-contrastText text-secondary-contrastText",
+      },
+      success: {
+        wrapper: "after:bg-success after:text-success-contrastText text-success-contrastText",
+      },
+      warning: {
+        wrapper: "after:bg-warning after:text-warning-contrastText text-warning-contrastText",
+      },
+      danger: {
+        wrapper: "after:bg-danger after:text-danger-contrastText text-danger-contrastText",
+      },
+    },
+    size: {
+      xs: {
+        wrapper: "w-3.5 h-3.5",
+        label: "ml-1 text-xs",
+        icon: "w-3 h-2",
+      },
+      sm: {
+        wrapper: "w-4 h-4",
+        label: "ml-1 text-sm",
+        icon: "w-3 h-2",
+      },
+      md: {
+        wrapper: "w-5 h-5",
+        label: "ml-2 text-base",
+        icon: "w-4 h-3",
+      },
+      lg: {
+        wrapper: "w-6 h-6",
+        label: "ml-2 text-lg",
+        icon: "w-5 h-4",
+      },
+      xl: {
+        wrapper: "w-7 h-7",
+        label: "ml-2 text-xl",
+        icon: "w-6 h-5",
+      },
+    },
+    radius: {
+      none: {
+        wrapper: "rounded-none before:rounded-none after:rounded-none",
+      },
+      base: {
+        wrapper: "rounded before:rounded after:rounded",
+      },
+      sm: {
+        wrapper: "rounded-sm before:rounded-sm after:rounded-sm",
+      },
+      md: {
+        wrapper: "rounded-md before:rounded-md after:rounded-md",
+      },
+      lg: {
+        wrapper: "rounded-lg before:rounded-lg after:rounded-lg",
+      },
+      xl: {
+        wrapper: "rounded-xl before:rounded-xl after:rounded-xl",
+      },
+      full: {
+        wrapper: "rounded-full before:rounded-full after:rounded-full",
+      },
+    },
+    lineThrough: {
+      true: {
+        label: "line-through",
+      },
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-50 cursor-not-allowed",
+      },
+    },
+    isFocusVisible: {
+      true: [...ringClasses],
+    },
+    disableAnimation: {
+      true: {
+        wrapper: "transition-none",
+      },
+      false: {
+        wrapper: "before:transition-background after:transition-transform-opacity",
+        icon: "transition-opacity",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "neutral",
+    size: "md",
+    radius: "md",
+    isDisabled: false,
+    disableAnimation: false,
+  },
+});
+
+export type CheckboxVariantProps = VariantProps<typeof checkbox>;
+export type CheckboxSlots = keyof ReturnType<typeof checkbox>;
+
+export {checkbox};

packages/core/theme/src/components/index.ts

@@ -11,3 +11,4 @@ export * from "./tooltip";
 export * from "./snippet";
 export * from "./chip";
 export * from "./badge";
+export * from "./checkbox";

packages/core/theme/src/utilities/index.ts

@@ -46,13 +46,11 @@ export const utilities = {
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION,
   },
-
   ".transition-shadow": {
     "transition-property": "box-shadow",
     "transition-timing-function": "ease",
     "transition-duration": DEFAULT_TRANSITION_DURATION,
   },
-
   ".transition-transform": {
     "transition-property": "transform",
     "transition-timing-function": "ease",

packages/storybook/.storybook/main.js

@@ -11,6 +11,7 @@ module.exports = {
     "../../components/snippet/stories/*.stories.@(js|jsx|ts|tsx)",
     "../../components/chip/stories/*.stories.@(js|jsx|ts|tsx)",
     "../../components/badge/stories/*.stories.@(js|jsx|ts|tsx)",
+    "../../components/checkbox/stories/*.stories.@(js|jsx|ts|tsx)",
   ],
   staticDirs: ["../public"],
   addons: [

packages/utilities/shared-utils/src/assertion.ts

@@ -35,3 +35,7 @@ export function isEmpty(value: any): boolean {
 export function isFunction<T extends Function = Function>(value: any): value is T {
   return typeof value === "function";
 }
+
+type Booleanish = boolean | "true" | "false";
+export const dataAttr = (condition: boolean | undefined) =>
+  (condition ? "true" : undefined) as Booleanish;

pnpm-lock.yaml

@@ -422,9 +422,9 @@ importers:
   packages/components/checkbox:
     specifiers:
       '@nextui-org/dom-utils': workspace:*
-      '@nextui-org/shared-css': workspace:*
       '@nextui-org/shared-utils': workspace:*
       '@nextui-org/system': workspace:*
+      '@nextui-org/theme': workspace:*
       '@react-aria/checkbox': ^3.8.0
       '@react-aria/focus': ^3.11.0
       '@react-aria/interactions': ^3.14.0
@@ -438,9 +438,9 @@ importers:
       react: ^18.2.0
     dependencies:
       '@nextui-org/dom-utils': link:../../utilities/dom-utils
-      '@nextui-org/shared-css': link:../../utilities/shared-css
       '@nextui-org/shared-utils': link:../../utilities/shared-utils
       '@nextui-org/system': link:../../core/system
+      '@nextui-org/theme': link:../../core/theme
       '@react-aria/checkbox': 3.8.0_react@18.2.0
       '@react-aria/focus': 3.11.0_react@18.2.0
       '@react-aria/interactions': 3.14.0_react@18.2.0