@capitaltg/vero 1.7.3 → 1.8.0

package/dist/types/index.d.ts

@@ -132,17 +132,22 @@ export declare interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLDivE
     onChange: (value: string[]) => void;
     className?: string;
     columns?: 1 | 2 | 3 | 4;
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'default' | 'tile' | 'button';
 }
 
 export declare interface CheckboxOption {
     id: string;
     label: string;
+    description?: string;
 }
 
 export declare interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'checked' | 'disabled'> {
     label?: ReactNode;
     isChecked?: boolean;
     isDisabled?: boolean;
+    variant?: 'default' | 'tile' | 'button';
+    description?: string;
 }
 
 export declare function cn(...inputs: ClassValue[]): string;
@@ -408,6 +413,7 @@ export declare interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<t
     value: string;
     onChange: (value: string) => void;
     className?: string;
+    columns?: 1 | 2 | 3 | 4;
     orientation?: 'horizontal' | 'vertical';
     variant?: 'default' | 'tile' | 'button';
 }
@@ -522,20 +528,34 @@ declare type StepId<T extends readonly Step[] | Step[]> = T[number]['id'];
 export declare type StepIdFromSteps<T extends readonly Step[] | Step[]> = StepId<T>;
 
 export declare const StepIndicator: <T extends readonly Step[] | Step[] = readonly Step[]>(props: StepIndicatorProps<T> & {
-    ref?: React_2.ForwardedRef<HTMLDivElement>;
+    ref?: React_2.ForwardedRef<HTMLElement>;
 }) => React_2.ReactElement;
 
 export declare interface StepIndicatorProps<T extends readonly Step[] | Step[] = readonly Step[]> extends HTMLAttributes<HTMLDivElement> {
     steps: T;
     currentStep: StepId<T>;
     className?: string;
-    orientation?: 'horizontal' | 'vertical';
-    size?: 'default' | 'sm' | 'lg';
+    /**
+     * Layout orientation of the step indicator.
+     * Only available for the 'counter' variant.
+     * The 'default' variant is always horizontal.
+     */
+    /**
+     * Variant style of the step indicator.
+     * - 'default': USWDS-style with header showing "Step X of Y" and segments
+     * - 'counter': Counter style with numbered circles and connectors
+     */
+    variant?: 'default' | 'counter';
     /**
      * If true, the current step will be shown as completed instead of current.
      * Useful for showing the final step as completed when the process is finished.
      */
     showCurrentAsCompleted?: boolean;
+    /**
+     * The heading level for the step indicator header.
+     * Defaults to 'h4'.
+     */
+    headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 export declare const Switch: React_2.ForwardRefExoticComponent<SwitchProps & React_2.RefAttributes<HTMLButtonElement>>;
@@ -654,4 +674,52 @@ declare type UseAriaDisabledOptions = {
 
 declare type UseAriaDisabledReturn = Omit<UseAriaDisabledActive, 'isDisabled'> | Omit<UseAriaDisabledInactive, 'isDisabled'>;
 
+/**
+ * Hook for managing ARIA attributes for form controls with external labels.
+ *
+ * When no explicit aria-label is provided, this hook generates IDs for the label
+ * and description elements and creates appropriate aria-labelledby and aria-describedby
+ * attributes to ensure screen readers can properly announce the form control.
+ *
+ * This hook can be used with checkboxes, radio buttons, and other form controls
+ * that have labels positioned outside the control element.
+ *
+ * @param options - Configuration options
+ * @returns ARIA props and generated IDs for label and description elements
+ */
+export declare function useAriaLabelled({ label, description, 'aria-label': ariaLabel, }?: UseAriaLabelledOptions): UseAriaLabelledReturn;
+
+export declare type UseAriaLabelledOptions = {
+    label?: React.ReactNode;
+    description?: string;
+    'aria-label'?: string;
+};
+
+export declare type UseAriaLabelledReturn = {
+    ariaProps: {
+        'aria-label'?: string;
+        'aria-labelledby'?: string;
+        'aria-describedby'?: string;
+    };
+    labelId: string;
+    descriptionId: string;
+};
+
+/**
+ * Hook for generating className strings for form group layouts.
+ *
+ * Handles the layout logic for form control groups (RadioGroup, CheckboxGroup)
+ * with support for different variants, orientations, and column layouts.
+ *
+ * @param options - Layout configuration options
+ * @returns className string for the form group container
+ */
+export declare function useFormGroupLayout({ variant, orientation, columns, }?: UseFormGroupLayoutOptions): string;
+
+export declare type UseFormGroupLayoutOptions = {
+    variant?: 'default' | 'tile' | 'button';
+    orientation?: 'horizontal' | 'vertical';
+    columns?: 1 | 2 | 3 | 4;
+};
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capitaltg/vero",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "description": "Accessible, modern, open source React component library inspired by USWDS built with Radix UI",
   "type": "module",
   "main": "dist/index.js",
@@ -85,7 +85,6 @@
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-interactions": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
-    "@storybook/addon-onboarding": "^8.0.0",
     "@storybook/blocks": "^8.0.0",
     "@storybook/react": "^8.0.0",
     "@storybook/react-vite": "^8.0.0",