infinity-ui-elements 1.3.1 → 1.4.0

package/README.md

@@ -21,7 +21,7 @@ yarn add infinity-ui-elements
 ### Basic Usage
 
 ```tsx
-import { Button } from 'infinity-ui-elements';
+import { Button, Checkbox } from 'infinity-ui-elements';
 
 function App() {
   return (
@@ -32,6 +32,11 @@ function App() {
       <Button variant="secondary">
         Secondary Button
       </Button>
+      
+      <Checkbox 
+        label="Accept terms and conditions" 
+        onChange={(e) => console.log(e.target.checked)}
+      />
     </div>
   );
 }
@@ -165,6 +170,62 @@ A versatile button component with multiple variants.
 </Button>
 ```
 
+### Checkbox
+
+A checkbox component for selecting options in forms with support for indeterminate states.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Label text for the checkbox |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Checkbox size |
+| `checked` | `boolean` | - | Controlled checked state |
+| `isIndeterminate` | `boolean` | `false` | Indeterminate state (mixed selection) |
+| `isDisabled` | `boolean` | `false` | Disabled state |
+| `validationState` | `'none' \| 'error'` | `'none'` | Validation state |
+| `helperText` | `string` | - | Helper text displayed below checkbox |
+| `errorText` | `string` | - | Error text (overrides helperText) |
+| `showErrorText` | `boolean` | `true` | Show/hide error text |
+| `onChange` | `(e: React.ChangeEvent<HTMLInputElement>) => void` | - | Change handler |
+
+#### Examples
+
+```tsx
+// Basic checkbox
+<Checkbox label="Accept terms" />
+
+// Controlled checkbox
+<Checkbox 
+  label="Subscribe to newsletter" 
+  checked={isSubscribed}
+  onChange={(e) => setIsSubscribed(e.target.checked)}
+/>
+
+// With validation
+<Checkbox 
+  label="Required field" 
+  validationState="error"
+  errorText="This field is required"
+/>
+
+// Indeterminate state (for "select all" scenarios)
+<Checkbox 
+  label="Select all" 
+  isIndeterminate={someSelected && !allSelected}
+  checked={allSelected}
+  onChange={handleSelectAll}
+/>
+
+// Different sizes
+<Checkbox size="small" label="Small" />
+<Checkbox size="medium" label="Medium" />
+<Checkbox size="large" label="Large" />
+
+// Disabled
+<Checkbox label="Can't change this" isDisabled checked />
+```
+
 ## Publishing
 
 ### Automated Publishing Commands

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,QAAA,MAAM,cAAc;;;;;;;;mFA0NnB,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACpE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IAC5E,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,QAAA,MAAM,MAAM,uFAoEX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,QAAA,MAAM,cAAc;;;;;;;;mFAsRnB,CAAC;AAEF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACpE,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC/C,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IAC5E,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,QAAA,MAAM,MAAM,uFAoEX,CAAC;AAGF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,49 @@
+import * as React from "react";
+declare const checkboxVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    validationState?: "none" | "error" | null | undefined;
+    isChecked?: boolean | null | undefined;
+    isIndeterminate?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Label text to display next to the checkbox
+     */
+    label?: string;
+    /**
+     * Error text to display below the checkbox
+     */
+    errorText?: string;
+    /**
+     * Size of the checkbox
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Validation state of the checkbox
+     */
+    validationState?: "none" | "error";
+    /**
+     * Whether the checkbox is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Whether to show error text (defaults to true if errorText is provided)
+     */
+    showErrorText?: boolean;
+    /**
+     * Custom class name for the container
+     */
+    containerClassName?: string;
+    /**
+     * Custom class name for the label
+     */
+    labelClassName?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox, checkboxVariants };
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,QAAA,MAAM,gBAAgB;;;;;;mFA6ErB,CAAC;AAEF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,QAAQ,wFAkNb,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,23 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./Checkbox").CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Indeterminate: Story;
+export declare const WithError: Story;
+export declare const WithErrorChecked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const Sizes: Story;
+export declare const ValidationStates: Story;
+export declare const CheckboxBase: Story;
+export declare const FullCheckboxComponent: Story;
+//# sourceMappingURL=Checkbox.stories.d.ts.map

package/dist/components/Checkbox/Checkbox.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI;;;;;;;CAOuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAoBnB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAmC9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAugB1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAkdnC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Checkbox, checkboxVariants } from "./Checkbox";
+export type { CheckboxProps } from "./Checkbox";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/FormFooter/FormFooter.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+export interface FormFooterProps {
+    /**
+     * Helper text to display on the left side
+     */
+    helperText?: string;
+    /**
+     * Trailing text to display on the right side (e.g., character count)
+     */
+    trailingText?: string;
+    /**
+     * Validation state that affects styling and icon display
+     */
+    validationState?: "default" | "positive" | "negative";
+    /**
+     * Size variant that affects text size, icon size, and spacing
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Whether the footer is in a disabled state
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom class name for the container
+     */
+    className?: string;
+    /**
+     * Custom class name for the helper text
+     */
+    helperTextClassName?: string;
+    /**
+     * Custom class name for the trailing text
+     */
+    trailingTextClassName?: string;
+}
+declare const FormFooter: React.ForwardRefExoticComponent<FormFooterProps & React.RefAttributes<HTMLDivElement>>;
+export { FormFooter };
+//# sourceMappingURL=FormFooter.d.ts.map

package/dist/components/FormFooter/FormFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFooter.d.ts","sourceRoot":"","sources":["../../../src/components/FormFooter/FormFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IACtD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,QAAA,MAAM,UAAU,wFAwIf,CAAC;AAIF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/FormFooter/FormFooter.stories.d.ts

@@ -0,0 +1,50 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./FormFooter").FormFooterProps & import("react").RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        helperText: {
+            control: "text";
+            description: string;
+        };
+        trailingText: {
+            control: "text";
+            description: string;
+        };
+        validationState: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        isDisabled: {
+            control: "boolean";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithTrailingText: Story;
+export declare const TrailingTextOnly: Story;
+export declare const Positive: Story;
+export declare const PositiveWithTrailing: Story;
+export declare const Negative: Story;
+export declare const NegativeWithTrailing: Story;
+export declare const Disabled: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const SizeComparison: Story;
+export declare const ValidationStateComparison: Story;
+export declare const WithInputField: Story;
+//# sourceMappingURL=FormFooter.stories.d.ts.map

package/dist/components/FormFooter/FormFooter.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFooter.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FormFooter/FormFooter.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAMlC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAMlC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAgC5B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAwCvC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyD5B,CAAC"}

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

@@ -0,0 +1,3 @@
+export { FormFooter } from "./FormFooter";
+export type { FormFooterProps } from "./FormFooter";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FormFooter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormFooter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/FormHeader/FormHeader.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+export interface FormHeaderProps {
+    /**
+     * The label text to display
+     */
+    label: string;
+    /**
+     * Size variant that affects text size, icon size, and spacing
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Whether to show "(optional)" text after the label
+     */
+    isOptional?: boolean;
+    /**
+     * Whether to show "*" (required indicator) after the label
+     */
+    isRequired?: boolean;
+    /**
+     * Tooltip heading text
+     */
+    infoHeading?: string;
+    /**
+     * Tooltip description text - if provided, shows the info icon
+     */
+    infoDescription?: string;
+    /**
+     * Link text to display on the right side
+     */
+    linkText?: string;
+    /**
+     * Link href or onClick handler
+     */
+    linkHref?: string;
+    /**
+     * Link click handler
+     */
+    onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * HTML for attribute to associate with form input
+     */
+    htmlFor?: string;
+    /**
+     * Custom class name for the container
+     */
+    className?: string;
+    /**
+     * Custom class name for the label
+     */
+    labelClassName?: string;
+    /**
+     * Custom class name for the link
+     */
+    linkClassName?: string;
+}
+declare const FormHeader: React.ForwardRefExoticComponent<FormHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export { FormHeader };
+//# sourceMappingURL=FormHeader.d.ts.map

package/dist/components/FormHeader/FormHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHeader.d.ts","sourceRoot":"","sources":["../../../src/components/FormHeader/FormHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,UAAU,wFAoIf,CAAC;AAIF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/FormHeader/FormHeader.stories.d.ts

@@ -0,0 +1,65 @@
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./FormHeader").FormHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        label: {
+            control: "text";
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        isOptional: {
+            control: "boolean";
+            description: string;
+        };
+        isRequired: {
+            control: "boolean";
+            description: string;
+        };
+        infoHeading: {
+            control: "text";
+            description: string;
+        };
+        infoDescription: {
+            control: "text";
+            description: string;
+        };
+        linkText: {
+            control: "text";
+            description: string;
+        };
+        linkHref: {
+            control: "text";
+            description: string;
+        };
+        htmlFor: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithOptional: Story;
+export declare const WithRequired: Story;
+export declare const WithInfo: Story;
+export declare const WithInfoAndHeading: Story;
+export declare const WithLink: Story;
+export declare const OptionalWithInfoAndLink: Story;
+export declare const RequiredWithInfoAndLink: Story;
+export declare const CompleteExample: Story;
+export declare const WithInputField: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const SizeComparison: Story;
+//# sourceMappingURL=FormHeader.stories.d.ts.map

package/dist/components/FormHeader/FormHeader.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHeader.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FormHeader/FormHeader.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KASrC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KASrC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkC7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAsB5B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KASpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KASnB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyC5B,CAAC"}

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

@@ -0,0 +1,3 @@
+export { FormHeader } from "./FormHeader";
+export type { FormHeaderProps } from "./FormHeader";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FormHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/Text/Text.d.ts

@@ -1,20 +1,13 @@
 import * as React from "react";
-declare const textVariants: (props?: ({
-    variant?: "heading" | "display" | "body" | "caption" | null | undefined;
-    size?: "xsmall" | "small" | "medium" | "large" | "2xlarge" | "xlarge" | null | undefined;
-    weight?: "medium" | "regular" | "semibold" | null | undefined;
-    color?: "default" | "primary" | "disabled" | "subtle" | "muted" | "onPrimary" | null | undefined;
-    as?: "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div" | "label" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, "color"> {
     children: React.ReactNode;
     variant?: "display" | "heading" | "body" | "caption";
     size?: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
     weight?: "regular" | "medium" | "semibold";
-    color?: "default" | "subtle" | "muted" | "disabled" | "primary" | "onPrimary";
+    color?: "default" | "subtle" | "muted" | "disabled" | "primary" | "onPrimary" | "positive" | "negative" | "notice" | "info" | "neutral";
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "label";
     className?: string;
 }
 declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
-export { Text, textVariants };
+export { Text };
 //# sourceMappingURL=Text.d.ts.map

package/dist/components/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,YAAY;;;;;;mFA+JhB,CAAC;AAEH,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IACrD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACtE,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC3C,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAAC;IAC9E,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,IAAI,+EAmBT,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8C/B,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;IACrD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACtE,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC3C,KAAK,CAAC,EACF,SAAS,GACT,QAAQ,GACR,OAAO,GACP,UAAU,GACV,SAAS,GACT,WAAW,GACX,UAAU,GACV,UAAU,GACV,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;IACd,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,IAAI,+EA4BT,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC"}

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

@@ -1,3 +1,3 @@
-export { Text, textVariants } from "./Text";
+export { Text } from "./Text";
 export type { TextProps } from "./Text";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAC5C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+declare const textAreaVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    validationState?: "positive" | "negative" | "none" | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    successText?: string;
+    size?: "small" | "medium" | "large";
+    validationState?: "none" | "positive" | "negative";
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isOptional?: boolean;
+    maxChar?: number;
+    showCharCount?: boolean;
+    containerClassName?: string;
+    labelClassName?: string;
+    textAreaClassName?: string;
+    infoHeading?: string;
+    infoDescription?: string;
+    linkText?: string;
+    linkHref?: string;
+    onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    rows?: number;
+}
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export { TextArea, textAreaVariants };
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/components/TextArea/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,QAAA,MAAM,gBAAgB;;;;mFA2CrB,CAAC;AAEF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,QAAQ,2FAoIb,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/TextArea/TextArea.stories.d.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TextArea } from "./TextArea";
+declare const meta: Meta<typeof TextArea>;
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const WithMaxCharLimit: Story;
+export declare const NearCharLimit: Story;
+export declare const Success: Story;
+export declare const Error: Story;
+export declare const Disabled: Story;
+export declare const WithoutCharCount: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const TwoRows: Story;
+export declare const SixRows: Story;
+export declare const AllStates: Story;
+export declare const SizeComparison: Story;
+export declare const CompleteMatrix: Story;
+export declare const MinimalWithoutLabel: Story;
+export declare const MinimalWithoutMaxChar: Story;
+export declare const CommentBox: Story;
+export declare const BioField: Story;
+export declare const FeedbackForm: Story;
+//# sourceMappingURL=TextArea.stories.d.ts.map

package/dist/components/TextArea/TextArea.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAgC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAGvC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAUpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAsGvB,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KA6C5B,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAsG5B,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,KAKjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC"}

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

@@ -0,0 +1,3 @@
+export { TextArea, textAreaVariants } from "./TextArea";
+export type { TextAreaProps } from "./TextArea";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TextArea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

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

@@ -13,6 +13,7 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
     validationState?: "none" | "positive" | "negative";
     isDisabled?: boolean;
     isRequired?: boolean;
+    isOptional?: boolean;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     showClearButton?: boolean;
@@ -22,6 +23,9 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
     inputClassName?: string;
     infoHeading?: string;
     infoDescription?: string;
+    linkText?: string;
+    linkHref?: string;
+    onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 }
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 export { TextField, textFieldVariants };

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,QAAA,MAAM,iBAAiB;;;;mFA2CtB,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,QAAA,MAAM,SAAS,yFAgRd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,QAAA,MAAM,iBAAiB;;;;mFAyCtB,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,QAAA,MAAM,SAAS,yFAqMd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC"}