feat(primitives): add Checkbox component

Author: ZAHON

packages/primitives/src/components/checkbox/README.md

@@ -0,0 +1,4 @@
+import type { CheckboxContextValue } from './checkbox-context.types';
+import { createContextId } from '@builder.io/qwik';
+
+export const CheckboxContext = createContextId<CheckboxContextValue>('qwik-primitives-checkbox-context');

packages/primitives/src/components/checkbox/checkbox-context/checkbox-context.tsx

@@ -0,0 +1,64 @@
+import type { ReadonlySignal, QRL, Signal } from '@builder.io/qwik';
+
+export interface CheckboxContextValue {
+  /**
+   * The controlled checked state of the checkbox.
+   */
+  isChecked: ReadonlySignal<boolean | 'indeterminate'>;
+
+  /**
+   * The function that allow change the controlled checked state of the checkbox.
+   */
+  setIsChecked$: QRL<(value: boolean | 'indeterminate') => void>;
+
+  /**
+   * The initila checked state of the checkbox.
+   */
+  initilaChecked: boolean | 'indeterminate';
+
+  /**
+   * The name of the text field.
+   * Submitted with its owning form as part of a name/value pair.
+   */
+  inputName: ReadonlySignal<string | undefined>;
+
+  /**
+   * The value given as data when submitted with a `name`.
+   */
+  inputValue: ReadonlySignal<string | undefined>;
+
+  /**
+   * When `true`, prevents the user from interacting with the checkbox.
+   */
+  isDisabled: ReadonlySignal<boolean | undefined>;
+
+  /**
+   * Whether the checkbox is invalid.
+   */
+  isInvalid: ReadonlySignal<boolean | undefined>;
+
+  /**
+   * When `true`, indicates that the user must check the checkbox before the owning form can be submitted.
+   */
+  isRequired: ReadonlySignal<boolean | undefined>;
+
+  /**
+   * The unique id of the checkbox label.
+   */
+  labelId: Signal<string | undefined>;
+
+  /**
+   * The unique id of the checkbox input.
+   */
+  inputId: Signal<string | undefined>;
+
+  /**
+   * The unique id of the checkbox description.
+   */
+  descriptionId: Signal<string | undefined>;
+
+  /**
+   * The unique id of the checkbox error message.
+   */
+  errorMessageId: Signal<string | undefined>;
+}

packages/primitives/src/components/checkbox/checkbox-context/checkbox-context.types.ts

@@ -0,0 +1,2 @@
+export type { CheckboxContextValue } from './checkbox-context.types';
+export { CheckboxContext } from './checkbox-context';

packages/primitives/src/components/checkbox/checkbox-context/index.ts

@@ -0,0 +1,43 @@
+import type { CheckboxDescriptionProps } from './checkbox-description.types';
+import { component$, useContext, useId, useTask$, Slot } from '@builder.io/qwik';
+import { CheckboxContext } from '../checkbox-context';
+
+/**
+ * The description that gives the user more information on the checkbox.
+ * This component is based on the `span` element.
+ */
+export const CheckboxDescription = component$<CheckboxDescriptionProps>((props) => {
+  const { as, id, ...others } = props;
+
+  const { isChecked, descriptionId, isDisabled, isInvalid, isRequired } = useContext(CheckboxContext);
+
+  const autoId = useId();
+
+  // This asynchronous function is required.
+  // This trick allows you to use the value coming from the context
+  // when this value is initialized or assigned in another component during SSR.
+  useTask$(async () => undefined);
+
+  useTask$(() => {
+    // During SSR we give the user the option to provide their own id.
+    descriptionId.value = id || `qwik-primitives-checkbox-description-${autoId}`;
+  });
+
+  const Component = as || 'span';
+
+  return (
+    <Component
+      id={descriptionId.value}
+      data-qwik-primitives-checkbox-description=""
+      data-scope="checkbox"
+      data-part="description"
+      data-state={isChecked.value === 'indeterminate' ? 'indeterminate' : isChecked.value ? 'checked' : 'unchecked'}
+      data-disabled={isDisabled.value ? '' : undefined}
+      data-invalid={isInvalid.value ? '' : undefined}
+      data-required={isRequired.value ? '' : undefined}
+      {...others}
+    >
+      <Slot />
+    </Component>
+  );
+});

packages/primitives/src/components/checkbox/checkbox-description/checkbox-description.tsx

@@ -0,0 +1,15 @@
+import type { PropsOf, FunctionComponent, CSSProperties } from '@builder.io/qwik';
+
+export interface CheckboxDescriptionProps extends PropsOf<'span'> {
+  /**
+   * Change the default rendered element for the one passed as, merging their props and behavior.
+   *
+   * Read our [Composition](https://github.com/ZAHON/qwik-primitives/blob/main/packages/primitives/docs/composition.md) guide for more details.
+   */
+  as?: FunctionComponent;
+
+  /**
+   * The inline style for the element.
+   */
+  style?: CSSProperties;
+}

packages/primitives/src/components/checkbox/checkbox-description/checkbox-description.types.ts

@@ -0,0 +1,2 @@
+export type { CheckboxDescriptionProps } from './checkbox-description.types';
+export { CheckboxDescription } from './checkbox-description';

packages/primitives/src/components/checkbox/checkbox-description/index.ts

@@ -0,0 +1,48 @@
+import type { CheckboxErrorMessageProps } from './checkbox-error-message.types';
+import { component$, useContext, useId, useTask$, Slot } from '@builder.io/qwik';
+import { CheckboxContext } from '../checkbox-context';
+
+/**
+ * The error message that gives the user information about how to fix a validation error on the checkbox.
+ * By default, it will render only when the `invalid` prop is set to `true` on `Checkbox.Root` component,
+ * use the `forceMount` prop to always render the error message.
+ * This component is based on the `span` element.
+ */
+export const CheckboxErrorMessage = component$<CheckboxErrorMessageProps>((props) => {
+  const { as, id, forceMount, ...others } = props;
+
+  const { isChecked, errorMessageId, isDisabled, isInvalid, isRequired } = useContext(CheckboxContext);
+
+  const autoId = useId();
+
+  // This asynchronous function is required.
+  // This trick allows you to use the value coming from the context
+  // when this value is initialized or assigned in another component during SSR.
+  useTask$(async () => undefined);
+
+  useTask$(() => {
+    // During SSR we give the user the option to provide their own id.
+    errorMessageId.value = id || `qwik-primitives-checkbox-error-message-${autoId}`;
+  });
+
+  const Component = as || 'span';
+
+  return (
+    (forceMount || isInvalid.value) && (
+      <Component
+        id={errorMessageId.value}
+        aria-hidden={forceMount && !isInvalid.value ? 'true' : undefined}
+        data-qwik-primitives-checkbox-error-message=""
+        data-scope="checkbox"
+        data-part="error-message"
+        data-state={isChecked.value === 'indeterminate' ? 'indeterminate' : isChecked.value ? 'checked' : 'unchecked'}
+        data-disabled={isDisabled.value ? '' : undefined}
+        data-invalid={isInvalid.value ? '' : undefined}
+        data-required={isRequired.value ? '' : undefined}
+        {...others}
+      >
+        <Slot />
+      </Component>
+    )
+  );
+});

packages/primitives/src/components/checkbox/checkbox-error-message/checkbox-error-message.tsx

@@ -0,0 +1,20 @@
+import type { PropsOf, FunctionComponent, CSSProperties } from '@builder.io/qwik';
+
+export interface CheckboxErrorMessageProps extends PropsOf<'span'> {
+  /**
+   * Change the default rendered element for the one passed as, merging their props and behavior.
+   *
+   * Read our [Composition](https://github.com/ZAHON/qwik-primitives/blob/main/packages/primitives/docs/composition.md) guide for more details.
+   */
+  as?: FunctionComponent;
+
+  /**
+   * Used to force mounting when more control is needed.
+   */
+  forceMount?: boolean;
+
+  /**
+   * The inline style for the element.
+   */
+  style?: CSSProperties;
+}

packages/primitives/src/components/checkbox/checkbox-error-message/checkbox-error-message.types.ts

@@ -0,0 +1,2 @@
+export type { CheckboxErrorMessageProps } from './checkbox-error-message.types';
+export { CheckboxErrorMessage } from './checkbox-error-message';