@common-origin/design-system 1.10.0 → 1.11.0

package/dist/components/molecules/Checkbox/Checkbox.d.ts

@@ -0,0 +1,64 @@
+import React, { InputHTMLAttributes } from 'react';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /**
+     * The label text for the checkbox
+     */
+    label: string;
+    /**
+     * Whether the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state
+     * Useful for "select all" scenarios where some but not all items are selected
+     */
+    indeterminate?: boolean;
+    /**
+     * Position of the label relative to the checkbox
+     * @default 'right'
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Helper text displayed below the checkbox
+     */
+    helperText?: string;
+    /**
+     * Error message to display. When provided, checkbox enters error state
+     */
+    error?: string;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback fired when the checkbox state changes
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Additional ARIA description for accessibility
+     */
+    'aria-describedby'?: string;
+}
+/**
+ * Checkbox component for binary selection with WCAG 2.2 AA compliance
+ *
+ * Features:
+ * - Custom styled checkbox with clear visual states
+ * - Integrated label with configurable positioning
+ * - Helper text and error messaging
+ * - Indeterminate state support
+ * - Full keyboard navigation (Space to toggle)
+ * - ARIA attributes for screen readers
+ * - 8px grid aligned (48px touch target)
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   label="Accept terms and conditions"
+ *   checked={accepted}
+ *   onChange={(e) => setAccepted(e.target.checked)}
+ *   required
+ * />
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/molecules/Checkbox/SelectableInputBase.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export type SelectableInputState = 'default' | 'error' | 'disabled';
+interface StyledCheckboxInputProps {
+    $state: SelectableInputState;
+    $checked: boolean;
+    $indeterminate?: boolean;
+}
+/**
+ * Hidden native checkbox input for accessibility
+ * Maintains keyboard navigation and screen reader support
+ */
+export declare const HiddenCheckboxInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledCheckboxInputProps>> & string;
+/**
+ * Custom checkbox visual component
+ * 24px × 24px for 8px grid alignment
+ * Uses component.input.* tokens for consistency with TextField
+ */
+export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledCheckboxInputProps>> & string;
+/**
+ * Container for checkbox with proper spacing and alignment
+ * 48px min-height for touch target (8px grid aligned)
+ */
+export declare const StyledCheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $disabled: boolean;
+    $labelPosition: 'left' | 'right';
+}>> & string;
+/**
+ * Label text with proper typography
+ */
+export declare const StyledCheckboxLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $disabled: boolean;
+}>> & string;
+export {};

package/dist/components/molecules/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { type SelectableInputState } from './SelectableInputBase';

package/dist/components/molecules/index.d.ts

@@ -1,6 +1,7 @@
 export * from './Breadcrumbs';
 export * from './CardSmall';
 export * from './CardLarge';
+export * from './Checkbox';
 export * from './ChipGroup';
 export * from './CodeBlock';
 export * from './FeatureBlock';