@common-origin/design-system 1.9.9 → 1.11.0

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export type ArtCardProps = {
+    title: string;
+    excerpt: string;
+    tag: string;
+    artist: string;
+    labels: string[];
+    coverImage: string;
+    onImageClick?: () => void;
+    imageHref?: string;
+};
+export declare const ArtCard: ({ title, excerpt, tag, artist, labels, coverImage, onImageClick, imageHref, }: ArtCardProps) => import("react").JSX.Element | null;

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

@@ -0,0 +1 @@
+export * from './ArtCard';

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/DesignCard/DesignCard.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export type DesignCardProps = {
+    title: string;
+    excerpt: string;
+    labels: string[];
+    tag: string;
+    coverImage: string;
+    date: string;
+    onReadMore?: () => void;
+    readMoreHref?: string;
+    readMoreText?: string;
+};
+export declare const DesignCard: React.FC<DesignCardProps>;

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

@@ -0,0 +1 @@
+export * from './DesignCard';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type ReleaseCardProps = {
+    title: string;
+    coverImage?: string;
+    artist?: string;
+    date?: string;
+    slug?: string;
+};
+export declare const ReleaseCard: React.FC<ReleaseCardProps>;

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

@@ -0,0 +1 @@
+export * from './ReleaseCard';

package/dist/components/molecules/TextField/InputBase.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+/**
+ * Shared input states for text-based form controls
+ */
+export type InputState = 'default' | 'focus' | 'error' | 'disabled';
+/**
+ * Base styled input component with all common styling
+ * Reusable across TextField, TextArea, PasswordInput, NumberInput
+ */
+interface StyledInputBaseProps {
+    $hasError?: boolean;
+    $disabled?: boolean;
+}
+export declare const StyledInputBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputBaseProps>> & string;
+/**
+ * Base styled textarea with shared styling
+ */
+export declare const StyledTextAreaBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, StyledInputBaseProps>> & string;
+export {};

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

@@ -0,0 +1,56 @@
+import { InputHTMLAttributes } from 'react';
+/**
+ * Props for the TextField component
+ */
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Whether the field is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Input type
+     * @default 'text'
+     */
+    type?: 'text' | 'email' | 'tel' | 'url' | 'search';
+    /**
+     * Unique identifier for the input
+     * Generated automatically if not provided
+     */
+    id?: string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * TextField component for text input with label, helper text, and error states
+ *
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Email"
+ *   type="email"
+ *   helperText="We'll never share your email"
+ *   required
+ * />
+ * ```
+ */
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,4 @@
+export { TextField } from './TextField';
+export type { TextFieldProps } from './TextField';
+export { StyledInputBase, StyledTextAreaBase } from './InputBase';
+export type { InputState } from './InputBase';

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

@@ -1,8 +1,10 @@
 export * from './Breadcrumbs';
 export * from './CardSmall';
 export * from './CardLarge';
+export * from './Checkbox';
 export * from './ChipGroup';
 export * from './CodeBlock';
 export * from './FeatureBlock';
 export * from './Dropdown';
 export * from './PageTitle';
+export * from './TextField';

package/dist/index.d.ts

@@ -493,6 +493,46 @@ export declare const tokens: {
                 };
             };
         };
+        input: {
+            default: {
+                backgroundColor: string;
+                textColor: string;
+                borderColor: string;
+                borderRadius: string;
+                borderWidth: string;
+                paddingY: string;
+                paddingX: string;
+                font: string;
+            };
+            placeholder: {
+                textColor: string;
+            };
+            hover: {
+                borderColor: string;
+            };
+            focus: {
+                borderColor: string;
+                outline: string;
+                outlineOffset: string;
+            };
+            error: {
+                borderColor: string;
+                focus: {
+                    borderColor: string;
+                    outline: string;
+                    outlineOffset: string;
+                };
+                hover: {
+                    borderColor: string;
+                };
+            };
+            disabled: {
+                backgroundColor: string;
+                textColor: string;
+                borderColor: string;
+                cursor: string;
+            };
+        };
         $ref: string;
     };
     semantic: {