@common-origin/design-system 1.5.0 → 1.7.0

package/README.md

@@ -109,7 +109,7 @@ function MyApp() {
 
 **✅ Atoms (12 components)**:
 - Alert, Avatar, Box, Button, Chip, Container
-- Picture, Icon, IconButton, SectionSeparator
+- Picture, Icon, IconButton, Divider
 - Stack, Typography
 
 **✅ Molecules (8 components)**:
@@ -134,16 +134,48 @@ This design system is production-ready with:
 
 ## 🤝 Contributing
 
-This design system follows established patterns:
-- **Comprehensive testing** with jest-axe for accessibility compliance
-- **Token-driven styling** - all components use semantic design tokens
-- **TypeScript interfaces** with complete props documentation  
-- **Atomic design principles** for scalable component organization
-- **Component documentation** with interactive examples and usage patterns
+We welcome contributions! Please follow our established standards:
 
-### Development Workflow
+### Quick Start
+```bash
+# Fork and clone
+git clone <your-fork>
+cd common-origin-design-system
+npm install
+
+# Start development
+npm run docs:dev  # Starts dev server with docs
+npm test          # Run tests
+```
+
+### Commit Convention
+We use [Conventional Commits](https://www.conventionalcommits.org/) for automatic changelog generation:
+
+```bash
+feat(Component): add new feature
+fix(Component): fix bug
+docs: update documentation
+chore: bump version to X.Y.Z
+```
+
+### Release Process
+```bash
+# Automated release (recommended)
+npm run release:create
+
+# Manual release - see .github/RELEASE_PROCESS.md
+```
+
+### Documentation
+- **Contributing Guide**: [CONTRIBUTING.md](./CONTRIBUTING.md)
+- **Release Process**: [.github/RELEASE_PROCESS.md](./.github/RELEASE_PROCESS.md)
+- **Documentation Standards**: [.github/DOCUMENTATION_STANDARDS.md](./.github/DOCUMENTATION_STANDARDS.md)
+- **Quick Reference**: [.github/RELEASE_CHEATSHEET.md](./.github/RELEASE_CHEATSHEET.md)
+
+### Development Standards
 1. Components follow the atomic design hierarchy
 2. All styling uses design tokens from `src/styles/tokens.json`
 3. Each component includes `.test.tsx`, `.docs.tsx`, and implementation files
 4. Tests must include accessibility validation with jest-axe
-5. Documentation includes live examples and prop descriptions
+5. Documentation includes live examples and prop descriptions
+6. Use conventional commit messages for all commits

package/dist/components/atoms/Chip/BooleanChip.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { BaseChipProps } from './shared/types';
+export interface BooleanChipProps extends BaseChipProps {
+    /** Whether the chip is in selected state */
+    selected: boolean;
+    /** Callback function when the chip is clicked/toggled */
+    onClick: () => void;
+}
+/**
+ * BooleanChip - Toggleable chip for quick filter controls
+ *
+ * Use this component for multi-select filter controls where users can
+ * see which options are active. Common in table filtering patterns where
+ * users toggle filters on/off.
+ *
+ * Features:
+ * - Shows checkmark icon when selected
+ * - Entire chip is clickable to toggle
+ * - Keyboard activation with Space or Enter
+ * - Uses checkbox role with aria-checked
+ * - Visual background change when selected
+ */
+export declare const BooleanChip: React.FC<BooleanChipProps>;

package/dist/components/atoms/Chip/Chip.d.ts

@@ -1,19 +1,32 @@
 import React from 'react';
-export interface ChipProps {
-    children?: React.ReactNode;
-    variant?: 'default' | 'emphasis' | 'subtle' | 'interactive' | 'light' | 'dark';
-    size?: 'small' | 'medium' | 'large';
+import { BaseChipProps, ChipVariant, LegacyVariant } from './shared/types';
+export interface ChipProps extends BaseChipProps {
+    /** Visual style variant */
+    variant?: ChipVariant | LegacyVariant;
+    /** Click handler for interactive chips */
     onClick?: () => void;
-    disabled?: boolean;
-    'data-testid'?: string;
-    'aria-label'?: string;
-    'aria-describedby'?: string;
+    /** Custom ARIA role override */
     role?: string;
+    /** Legacy title prop for backward compatibility */
     title?: string;
 }
+/**
+ * Chip - Compact element for displaying tags, categories, and labels
+ *
+ * Use this component for static display chips or simple interactive chips.
+ * For specialized filtering patterns, use:
+ * - FilterChip: Dismissible chips for showing applied filters
+ * - BooleanChip: Toggleable chips for quick filter controls
+ *
+ * Variants:
+ * - default: Standard gray background
+ * - emphasis: High-contrast dark background
+ * - subtle: Light background for secondary info
+ * - interactive: Blue background with hover states
+ */
 export declare const Chip: React.FC<ChipProps>;
 export interface LegacyChipProps {
     title: string;
-    variant?: 'light' | 'dark';
+    variant?: LegacyVariant;
 }
 export declare const LegacyChip: React.FC<LegacyChipProps>;

package/dist/components/atoms/Chip/FilterChip.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BaseChipProps } from './shared/types';
+export interface FilterChipProps extends BaseChipProps {
+    /** Whether the filter is in selected/applied state */
+    selected?: boolean;
+    /** Callback function when the chip is dismissed via close button or keyboard */
+    onDismiss?: () => void;
+    /** Custom ARIA role override */
+    role?: string;
+}
+/**
+ * FilterChip - Chip for displaying filters with selected state and optional dismissal
+ *
+ * Use this component to show filters that can be selected/deselected.
+ * When selected, displays a checkmark and light blue background.
+ * Optionally dismissible when onDismiss is provided.
+ *
+ * Features:
+ * - Shows checkmark icon when selected
+ * - Light blue background when selected
+ * - Optional close (×) button when onDismiss is provided
+ * - Keyboard dismissal with Delete or Backspace keys (when dismissible)
+ * - Non-clickable body (only close button is interactive when present)
+ * - Uses subtle/interactive background styling based on selected state
+ * - Announces as "status" to screen readers
+ */
+export declare const FilterChip: React.FC<FilterChipProps>;

package/dist/components/atoms/Chip/index.d.ts

@@ -1 +1,3 @@
 export * from './Chip';
+export * from './FilterChip';
+export * from './BooleanChip';

package/dist/components/atoms/Chip/shared/ChipBase.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { InternalStyledProps } from './types';
+export declare const BaseChipStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $disabled?: boolean | undefined;
+}>> & string;
+export declare const StyledChipWrapper: React.FC<React.PropsWithChildren<InternalStyledProps & React.HTMLAttributes<HTMLSpanElement>>>;

package/dist/components/atoms/Chip/shared/types.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface BaseChipProps {
+    children?: React.ReactNode;
+    size?: 'small' | 'medium';
+    disabled?: boolean;
+    'data-testid'?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+export type ChipVariant = 'default' | 'emphasis' | 'subtle' | 'interactive';
+export interface InternalStyledProps {
+    $variant: ChipVariant;
+    $size: BaseChipProps['size'];
+    $disabled?: boolean;
+    $clickable?: boolean;
+    $selected?: boolean;
+}
+export type LegacyVariant = 'light' | 'dark';

package/dist/components/atoms/Chip/shared/utils.d.ts

@@ -0,0 +1,47 @@
+import { ChipVariant, BaseChipProps } from './types';
+declare const chip: {
+    default: {
+        backgroundColor: string;
+        textColor: string;
+        borderRadius: string;
+        padding: string;
+        font: string;
+    };
+    variants: {
+        emphasis: {
+            backgroundColor: string;
+            textColor: string;
+        };
+        subtle: {
+            backgroundColor: string;
+            textColor: string;
+        };
+        interactive: {
+            backgroundColor: string;
+            textColor: string;
+        };
+    };
+    sizes: {
+        small: {
+            padding: string;
+            font: string;
+        };
+        medium: {
+            padding: string;
+            font: string;
+        };
+        large: {
+            padding: string;
+            font: string;
+        };
+    };
+};
+export declare const getVariantStylesAsObject: (variant: ChipVariant, selected?: boolean) => {
+    backgroundColor: string;
+    color: string;
+};
+export declare const getSizeStylesAsObject: (size: BaseChipProps['size']) => {
+    font: string;
+    padding: string;
+};
+export { chip as chipTokens };

package/dist/components/atoms/Divider/Divider.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export interface DividerProps {
+    /** Variant style of the divider */
+    variant?: 'default' | 'strong' | 'minimal';
+    /** Size variation affecting spacing */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Orientation of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * Divider is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Horizontal and vertical orientations
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Divider />
+ * <Divider variant="strong" size="xlarge" />
+ * <Divider variant="minimal" />
+ * <Divider orientation="vertical" />
+ * ```
+ */
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/atoms/Divider/index.d.ts

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

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

@@ -8,6 +8,6 @@ export * from './DateFormatter';
 export * from './Icon';
 export * from './IconButton';
 export * from './ProgressBar';
-export * from './SectionSeparator';
+export * from './Divider';
 export * from './Stack';
 export * from './Typography';