@arbor-education/design-system.components 0.11.0 → 0.12.0

package/dist/index.js

@@ -1,50 +1,55 @@
 export { Avatar } from './components/avatar/Avatar';
-export { AvatarGroup, } from './components/avatarGroup/AvatarGroup';
-export { Banner, BANNER_LEVEL } from './components/banner/Banner';
+export { AvatarGroup } from './components/avatarGroup/AvatarGroup';
+export { Badge } from './components/badge/Badge';
+export { Banner } from './components/banner/Banner';
 export { Button } from './components/button/Button';
 export { Card } from './components/card/Card';
+export { Combobox } from './components/combobox/Combobox';
 export { DatePicker } from './components/datePicker/DatePicker';
 export { DateTimePicker } from './components/dateTimePicker/DateTimePicker';
-export { Dropdown } from './components/dropdown/Dropdown';
-export { Tag } from './components/tag/Tag';
 export { Dot } from './components/dot/Dot';
-export { Badge } from './components/badge/Badge';
-export { Tabs } from './components/tabs/Tabs';
-export { NumberInput } from './components/formField/inputs/number/NumberInput';
-export { CheckboxInput } from './components/formField/inputs/checkbox/CheckboxInput';
+export { Dropdown } from './components/dropdown/Dropdown';
 export { EditableText } from './components/editableText/EditableText';
-export { Fieldset } from './components/formField/fieldset/Fieldset';
+export { CheckboxGroup } from './components/formField/inputs/checkbox/CheckboxGroup';
+export { CheckboxInput } from './components/formField/inputs/checkbox/CheckboxInput';
 export { ColourPickerDropdown } from './components/formField/inputs/colourPickerDropdown/ColourPickerDropdown';
+export { NumberInput } from './components/formField/inputs/number/NumberInput';
+export { RadioButtonGroup } from './components/formField/inputs/radio/RadioButtonGroup';
 export { RadioButtonInput } from './components/formField/inputs/radio/RadioButtonInput';
 export { SelectDropdown } from './components/formField/inputs/selectDropdown/SelectDropdown';
 export { TextInput } from './components/formField/inputs/text/TextInput';
 export { TimeInput } from './components/formField/inputs/time/TimeInput';
 export { TextArea } from './components/formField/inputs/textArea/TextArea';
+export { Fieldset } from './components/formField/fieldset/Fieldset';
+export { FormField } from './components/formField/FormField';
 export { Heading } from './components/heading/Heading';
 export { Icon } from './components/icon/Icon';
 export { Modal } from './components/modal/Modal';
 export { ModalManager } from './components/modal/modalManager/ModalManager';
 export { Pill } from './components/pill/Pill';
 export { Progress } from './components/progress/Progress';
+export { Row } from './components/row/Row';
 export { SearchBar } from './components/searchBar/SearchBar';
 export { Section } from './components/section/Section';
 export { Separator } from './components/separator/Separator';
 export { SingleUser } from './components/singleUser/SingleUser';
 export { Slideover } from './components/slideover/Slideover';
 export { SlideoverManager } from './components/slideoverManager/SlideoverManager';
-export { DefaultCellRenderer } from './components/table/cellRenderers/DefaultCellRenderer';
 export { BooleanCellRenderer } from './components/table/cellRenderers/BooleanCellRenderer';
+export { DefaultCellRenderer } from './components/table/cellRenderers/DefaultCellRenderer';
 export { DSDefaultColDef } from './components/table/DSDefaultColDef';
 export { GridApiContext } from './components/table/GridApiContext';
 export { Table } from './components/table/Table';
+export { Tabs } from './components/tabs/Tabs';
+export { Tag } from './components/tag/Tag';
 export { Toast } from './components/toast/Toast';
+export { Toggle } from './components/toggle/Toggle';
 export { Tooltip } from './components/tooltip/Tooltip';
 export { TooltipWrapper } from './components/tooltip/TooltipWrapper';
 export { ArborLogo, GovhubLogo, KeyLogo, RobinLogo, SampeopleLogo, TimetablerLogo } from './components/userDropdown/assets/logos';
 export { UserDropdown } from './components/userDropdown/UserDropdown';
-export { Row } from './components/row/Row';
-export { Combobox } from './components/combobox/Combobox';
-export { Toggle } from './components/toggle/Toggle';
+export { ModalUtils } from './utils/ModalUtils';
+export { PopupParentContext } from './utils/PopupParentContext';
 export { SlideoverUtils } from './utils/SlideoverUtils';
 export { CheckboxCellRenderer } from './components/table/cellRenderers/CheckboxCellRenderer';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/utils/setAgGridLicenseKey.js

@@ -2,7 +2,7 @@ import { AgChartsCommunityModule } from 'ag-charts-community';
 import { ModuleRegistry } from 'ag-grid-community';
 import { LicenseManager, IntegratedChartsModule, AllEnterpriseModule, } from 'ag-grid-enterprise';
 export const setAgGridLicenseKey = () => {
-    LicenseManager.setLicenseKey('Using_this_{AG_Grid}_Enterprise_key_{AG-076208}_in_excess_of_the_licence_granted_is_not_permitted___Please_report_misuse_to_legal@ag-grid.com___For_help_with_changing_this_key_please_contact_info@ag-grid.com___{Arbor_Education_Partners_Ltd}_is_granted_a_{Single_Application}_Developer_License_for_the_application_{Arbor_MIS}_only_for_{4}_Front-End_JavaScript_developers___All_Front-End_JavaScript_developers_working_on_{Arbor_MIS}_need_to_be_licensed___{Arbor_MIS}_has_been_granted_a_Deployment_License_Add-on_for_{1}_Production_Environment___This_key_works_with_{AG_Grid}_Enterprise_versions_released_before_{16_March_2026}____[v3]_[01]_MTc3MzYxOTIwMDAwMA==8820260fc59099926cf507c1e8018e49');
+    LicenseManager.setLicenseKey('Using_this_{AG_Grid}_Enterprise_key_{AG-121221}_in_excess_of_the_licence_granted_is_not_permitted___Please_report_misuse_to_legal@ag-grid.com___For_help_with_changing_this_key_please_contact_info@ag-grid.com___{Arbor_Education_Partners_Ltd}_is_granted_a_{Single_Application}_Developer_License_for_the_application_{Arbor_MIS}_only_for_{4}_Front-End_JavaScript_developers___All_Front-End_JavaScript_developers_working_on_{Arbor_MIS}_need_to_be_licensed___{Arbor_MIS}_has_been_granted_a_Deployment_License_Add-on_for_{1}_Production_Environment___This_key_works_with_{AG_Grid}_Enterprise_versions_released_before_{16_March_2027}____[v3]_[01]_MTgwNTE1NTIwMDAwMA==5c76013322ec3fd2d2a63ed85f528464');
     ModuleRegistry.registerModules([
         IntegratedChartsModule.with(AgChartsCommunityModule),
         AllEnterpriseModule,

package/eslint.config.mts

@@ -25,6 +25,7 @@ export default defineConfig([
       'react/jsx-uses-react': 'off',
       'react/no-unescaped-entities': 'off',
       '@stylistic/quotes': ['error', 'single', { avoidEscape: true }],
+      '@typescript-eslint/no-namespace': 'off',
     },
   },
 ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arbor-education/design-system.components",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "The component library for the design system (the baby)",
   "main": "dist/index.js",
   "repository": {

package/src/components/avatar/Avatar.tsx

@@ -66,3 +66,8 @@ export const Avatar = (props: AvatarProps) => {
     </span>
   );
 };
+
+export namespace Avatar {
+  export type Size = AvatarSize;
+  export type Props = AvatarProps;
+}

package/src/components/avatarGroup/AvatarGroup.tsx

@@ -125,3 +125,10 @@ AvatarGroupRoot.displayName = 'AvatarGroup';
 export const AvatarGroup = Object.assign(AvatarGroupRoot, {
   OverflowCount: AvatarGroupOverflowCount,
 });
+
+export namespace AvatarGroup {
+  export type Item = AvatarGroupItem;
+  export type ListOrder = AvatarGroupListOrder;
+  export type OverflowCountProps = AvatarGroupOverflowCountProps;
+  export type Props = AvatarGroupProps;
+}

package/src/components/badge/Badge.tsx

@@ -33,3 +33,9 @@ export const Badge = ({
     </span>
   );
 };
+
+export namespace Badge {
+  export type Size = BadgeSize;
+  export type Colour = BadgeColour;
+  export type Props = BadgeProps;
+}

package/src/components/banner/Banner.tsx

@@ -40,7 +40,7 @@ const DEFAULT_ICON_MAP: Record<BANNER_LEVEL, IconName> = {
   [BANNER_LEVEL.DESTRUCTIVE]: 'circle-alert',
 };
 
-export const Banner = (props: BannerProps) => {
+const BannerRoot = (props: BannerProps) => {
   const {
     className,
     level = BANNER_LEVEL.NEUTRAL,
@@ -79,3 +79,12 @@ export const Banner = (props: BannerProps) => {
     </div>
   );
 };
+
+export const Banner = Object.assign(BannerRoot, {
+  Level: BANNER_LEVEL,
+});
+
+export namespace Banner {
+  export type Props = BannerProps;
+  export type Level = BANNER_LEVEL;
+}

package/src/components/button/Button.tsx

@@ -67,3 +67,9 @@ export const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProp
 });
 
 Button.displayName = 'Button';
+
+export namespace Button {
+  export type Variant = ButtonVariant;
+  export type Size = ButtonSize;
+  export type Props = ButtonProps;
+}

package/src/components/card/Card.tsx

@@ -99,3 +99,7 @@ export const Card = ({
     </article>
   );
 };
+
+export namespace Card {
+  export type Props = CardProps;
+}

package/src/components/combobox/Combobox.tsx

@@ -6,7 +6,7 @@ import { buildOptionGroups } from './buildListboxDisplayOptions';
 import { ComboboxButtonTrigger } from './ComboboxButtonTrigger';
 import { ComboboxListbox } from './ComboboxListbox';
 import { ComboboxTrigger } from './ComboboxTrigger';
-import type { ComboboxProps } from './types';
+import type { ComboboxAriaInvalid, ComboboxCreateResult, ComboboxOption, ComboboxProps, ComboboxSearchFn, ComboboxSearchType } from './types';
 import { useChipSelection } from './useChipSelection';
 import { useComboboxKeyboard } from './useComboboxKeyboard';
 import { useComboboxListboxDom } from './useComboboxListboxDom';
@@ -441,3 +441,12 @@ export const Combobox = ComboboxRoot as ComboboxCompound;
 Combobox.Trigger = ComboboxTrigger;
 Combobox.ButtonTrigger = ComboboxButtonTrigger;
 Combobox.Listbox = ComboboxListbox;
+
+export namespace Combobox {
+  export type Option = ComboboxOption;
+  export type Props = ComboboxProps;
+  export type SearchFn = ComboboxSearchFn;
+  export type SearchType = ComboboxSearchType;
+  export type CreateResult = ComboboxCreateResult;
+  export type AriaInvalid = ComboboxAriaInvalid;
+}

package/src/components/datePicker/DatePicker.tsx

@@ -236,3 +236,7 @@ export const DatePicker = (props: DatePickerProps) => {
     </div>
   );
 };
+
+export namespace DatePicker {
+  export type Props = DatePickerProps;
+}

package/src/components/dateTimePicker/DateTimePicker.tsx

@@ -290,4 +290,7 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
   );
 };
 
-export type { DateTimePickerDisplayFormat } from 'Components/datePicker/dateInputUtils';
+export namespace DateTimePicker {
+  export type Props = DateTimePickerProps;
+  export type DisplayFormat = DateTimePickerDisplayFormat;
+}

package/src/components/dot/Dot.tsx

@@ -16,3 +16,8 @@ export const Dot = ({ colour, label }: DotProps): React.JSX.Element => {
     />
   );
 };
+
+export namespace Dot {
+  export type Props = DotProps;
+  export type Colour = DotColour;
+}

package/src/components/dropdown/Dropdown.tsx

@@ -1,8 +1,8 @@
 import { DropdownMenu } from 'radix-ui';
-import { DropdownTrigger } from './DropdownTrigger';
-import { DropdownContent } from './DropdownContent';
+import { DropdownTrigger, type DropdownTriggerProps } from './DropdownTrigger';
+import { DropdownContent, type DropdownContentProps } from './DropdownContent';
 import { DropdownItem } from './items/DropdownItem';
-import { DropdownSelectItem } from './items/DropdownSelectItem';
+import { DropdownSelectItem, type DropdowSelectItemProps } from './items/DropdownSelectItem';
 import { DropdownSeparator } from './items/DropdownSeparator';
 import { DropdownGroup } from './items/DropdownGroup';
 
@@ -21,3 +21,13 @@ Dropdown.Item = DropdownItem;
 Dropdown.SelectItem = DropdownSelectItem;
 Dropdown.Separator = DropdownSeparator;
 Dropdown.Group = DropdownGroup;
+
+export namespace Dropdown {
+  export type Props = DropdownMenu.DropdownMenuProps;
+  export type TriggerProps = DropdownTriggerProps;
+  export type ContentProps = DropdownContentProps;
+  export type ItemProps = DropdownMenu.DropdownMenuItemProps;
+  export type SelectItemProps = DropdowSelectItemProps;
+  export type SeparatorProps = DropdownMenu.DropdownMenuSeparatorProps;
+  export type GroupProps = DropdownMenu.DropdownMenuGroupProps;
+}

package/src/components/dropdown/DropdownContent.tsx

@@ -3,7 +3,7 @@ import { DropdownMenu } from 'radix-ui';
 import { useContext } from 'react';
 import { PopupParentContext } from 'Utils/PopupParentContext';
 
-type DropdownContentProps = {
+export type DropdownContentProps = {
   children: React.ReactNode;
   portalProps?: DropdownMenu.DropdownMenuPortalProps;
   contentProps?: DropdownMenu.DropdownMenuContentProps;

package/src/components/dropdown/DropdownTrigger.tsx

@@ -1,6 +1,8 @@
 import { DropdownMenu } from 'radix-ui';
 
-export const DropdownTrigger = (props: DropdownMenu.DropdownMenuTriggerProps & { children: React.ReactElement }) => {
+export type DropdownTriggerProps = DropdownMenu.DropdownMenuTriggerProps & { children: React.ReactElement };
+
+export const DropdownTrigger = (props: DropdownTriggerProps) => {
   const { children, ...rest } = props;
   return (
     <DropdownMenu.Trigger asChild {...rest}>

package/src/components/formField/FormField.tsx

@@ -11,7 +11,7 @@ import { TimeInput, type TimeInputProps } from './inputs/time/TimeInput';
 import { TextArea, type TextAreaProps } from './inputs/textArea/TextArea';
 import { Label } from './label/Label';
 
-type FormFieldProps = {
+export type FormFieldProps = {
   className?: string;
   label?: string;
   id?: string;
@@ -102,3 +102,7 @@ export const FormField = (props: FormFieldProps) => {
     </div>
   );
 };
+
+export namespace FormField {
+  export type Props = FormFieldProps;
+}

package/src/components/formField/fieldset/Fieldset.tsx

@@ -15,3 +15,7 @@ export const Fieldset = (props: FieldsetProps) => {
     </fieldset>
   );
 };
+
+export namespace Fieldset {
+  export type Props = FieldsetProps;
+}

package/src/components/formField/inputs/checkbox/CheckboxGroup.tsx

@@ -1,7 +1,7 @@
 import { Fieldset, type FieldsetProps } from 'Components/formField/fieldset/Fieldset';
 import { CheckboxInput, type CheckboxInputProps } from './CheckboxInput';
 
-type CheckboxGroupProps = {
+export type CheckboxGroupProps = {
   options: CheckboxInputProps[];
 } & FieldsetProps;
 
@@ -15,3 +15,7 @@ export const CheckboxGroup = (props: CheckboxGroupProps) => {
     </Fieldset>
   );
 };
+
+export namespace CheckboxGroup {
+  export type Props = CheckboxGroupProps;
+}

package/src/components/formField/inputs/checkbox/CheckboxInput.tsx

@@ -79,3 +79,7 @@ export const CheckboxInput = (props: CheckboxInputProps) => {
     </label>
   );
 };
+
+export namespace CheckboxInput {
+  export type Props = CheckboxInputProps;
+}

package/src/components/formField/inputs/colourPickerDropdown/ColourPickerDropdown.tsx

@@ -51,3 +51,7 @@ export const ColourPickerDropdown = ({ value = '#3cad51', onChange, hasError, di
     </>
   );
 };
+
+export namespace ColourPickerDropdown {
+  export type Props = ColourPickerDropdownProps;
+}

package/src/components/formField/inputs/number/NumberInput.tsx

@@ -131,3 +131,7 @@ export const NumberInput = (props: NumberInputProps) => {
 
   );
 };
+
+export namespace NumberInput {
+  export type Props = NumberInputProps;
+}

package/src/components/formField/inputs/radio/RadioButtonGroup.tsx

@@ -20,3 +20,7 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
     </Fieldset>
   );
 };
+
+export namespace RadioButtonGroup {
+  export type Props = RadioButtonGroupProps;
+}

package/src/components/formField/inputs/radio/RadioButtonInput.tsx

@@ -44,3 +44,7 @@ export const RadioButtonInput = (props: RadioButtonInputProps) => {
     </label>
   );
 };
+
+export namespace RadioButtonInput {
+  export type Props = RadioButtonInputProps;
+}

package/src/components/formField/inputs/selectDropdown/SelectDropdown.tsx

@@ -142,3 +142,7 @@ export const SelectDropdown = (props: SelectDropdownInputProps) => {
     </>
   );
 };
+
+export namespace SelectDropdown {
+  export type Props = SelectDropdownInputProps;
+}

package/src/components/formField/inputs/text/TextInput.tsx

@@ -36,3 +36,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, re
 });
 
 TextInput.displayName = 'TextInput';
+
+export namespace TextInput {
+  export type Props = TextInputProps;
+}

package/src/components/formField/inputs/textArea/TextArea.tsx

@@ -54,3 +54,7 @@ export const TextArea = (props: TextAreaProps) => {
     />
   );
 };
+
+export namespace TextArea {
+  export type Props = TextAreaProps;
+}

package/src/components/formField/inputs/time/TimeInput.tsx

@@ -166,3 +166,9 @@ export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>((props, re
 });
 
 TimeInput.displayName = 'TimeInput';
+
+export namespace TimeInput {
+  export type Props = TimeInputProps;
+  export type Value = TimeValue;
+  export type Granularity = TimeGranularity;
+}

package/src/components/heading/Heading.tsx

@@ -36,3 +36,9 @@ export const Heading = (props: HeadingProps) => {
 };
 
 Heading.InnerContainer = HeadingInnerContainer;
+
+export namespace Heading {
+  export type Props = HeadingProps;
+  export type Level = HeadingLevel;
+  export type InnerContainerProps = HeadingSubContainerProps;
+}

package/src/components/icon/Icon.tsx

@@ -1,4 +1,4 @@
-import type { IconSize } from './types';
+import type { CustomIconProps, IconSize } from './types';
 import { allowedIcons, type IconName } from './allowedIcons';
 import classNames from 'classnames';
 
@@ -24,3 +24,10 @@ export const Icon = (props: IconProps) => {
     </>
   );
 };
+
+export namespace Icon {
+  export type Props = IconProps;
+  export type Name = IconName;
+  export type Size = IconSize;
+  export type CustomProps = CustomIconProps;
+}

package/src/components/modal/Modal.tsx

@@ -1,12 +1,13 @@
 import classNames from 'classnames';
 import { Dialog } from 'radix-ui';
-import { ModalHeader } from './ModalHeader';
-import { ModalFooter } from './ModalFooter';
-import { ModalBody } from './ModalBody';
+import { ModalHeader, type ModalHeaderProps } from './ModalHeader';
+import { ModalFooter, type ModalFooterProps } from './ModalFooter';
+import { ModalBody, type ModalBodyProps } from './ModalBody';
 import { PopupParentContext } from 'Utils/PopupParentContext';
 import { createContext, useRef } from 'react';
 import { ModalCloseButon } from './ModalCloseButton';
 import { ModalTitle } from './ModalTitle';
+import type { ButtonProps } from 'Components/button/Button';
 
 type ModalContextValue = {
   closeHandler?: () => void;
@@ -63,3 +64,12 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.CloseButton = ModalCloseButon;
 Modal.Title = ModalTitle;
+
+export namespace Modal {
+  export type Props = ModalProps;
+  export type HeaderProps = ModalHeaderProps;
+  export type BodyProps = ModalBodyProps;
+  export type FooterProps = ModalFooterProps;
+  export type CloseButtonProps = ButtonProps;
+  export type TitleProps = Dialog.DialogTitleProps;
+}

package/src/components/progress/Progress.tsx

@@ -14,3 +14,7 @@ export const Progress = (props: ProgressProps) => {
     </RadixProgress.Root>
   );
 };
+
+export namespace Progress {
+  export type Props = ProgressProps;
+}

package/src/components/row/Row.tsx

@@ -52,3 +52,7 @@ export const Row = (props: RowProps) => {
     </div>
   );
 };
+
+export namespace Row {
+  export type Props = RowProps;
+}

package/src/components/singleUser/SingleUser.tsx

@@ -43,3 +43,7 @@ export const SingleUser = React.forwardRef<HTMLSpanElement, SingleUserProps>(
 );
 
 SingleUser.displayName = 'SingleUser';
+
+export namespace SingleUser {
+  export type Props = SingleUserProps;
+}

package/src/components/slideover/Slideover.tsx

@@ -60,3 +60,7 @@ export const Slideover = (props: SlideoverProps) => {
     </aside>
   );
 };
+
+export namespace Slideover {
+  export type Props = SlideoverProps;
+}