@bcgov/design-system-react-components 0.6.1 → 0.7.0-pr643

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DisclosureProps, DisclosureGroupProps, DialogProps as DialogProps$1, ButtonProps as ButtonProps$1, CalendarProps, DateValue, CheckboxProps, CheckboxGroupProps as CheckboxGroupProps$1, ValidationResult, DatePickerProps as DatePickerProps$1, FormProps, HeadingProps as HeadingProps$1, LinkProps as LinkProps$1, ModalOverlayProps, RadioProps, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, Key, TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TextProps as TextProps$1, TextFieldProps as TextFieldProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, SwitchProps as SwitchProps$1, TooltipProps, NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components';
+import { DisclosureProps, DisclosureGroupProps, DialogProps as DialogProps$1, ButtonProps as ButtonProps$1, CalendarProps, DateValue, CheckboxProps, CheckboxGroupProps as CheckboxGroupProps$1, ValidationResult, DatePickerProps as DatePickerProps$1, FormProps, HeadingProps as HeadingProps$1, LinkProps as LinkProps$1, ModalOverlayProps, ProgressBarProps as ProgressBarProps$1, RadioProps, RadioGroupProps as RadioGroupProps$1, TagProps as TagProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, Key, SeparatorProps as SeparatorProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TextProps as TextProps$1, TextFieldProps as TextFieldProps$1, TimeValue, TimeFieldProps as TimeFieldProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, SwitchProps as SwitchProps$1, TooltipProps, NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components';
 export { DialogTrigger, TooltipTrigger } from 'react-aria-components';
 import { PropsWithChildren } from 'react';
 
@@ -15,6 +15,8 @@ interface AccordionGroupProps extends DisclosureGroupProps {
 declare function AccordionGroup({ title, titleElement, children, ...props }: AccordionGroupProps): react_jsx_runtime.JSX.Element;
 
 interface AlertBannerProps extends React.PropsWithChildren {
+    size?: "small" | "medium";
+    layout?: "fixed" | "fluid";
     variant?: "info" | "success" | "warning" | "danger" | "black";
     isIconHidden?: boolean;
     isCloseable?: boolean;
@@ -22,7 +24,7 @@ interface AlertBannerProps extends React.PropsWithChildren {
     customIcon?: React.ReactNode;
     onClose?: () => void;
 }
-declare function AlertBanner({ variant, isIconHidden, isCloseable, role, onClose, children, customIcon, ...props }: AlertBannerProps): react_jsx_runtime.JSX.Element;
+declare function AlertBanner({ variant, size, layout, isIconHidden, isCloseable, role, onClose, children, customIcon, ...props }: AlertBannerProps): react_jsx_runtime.JSX.Element;
 
 interface AlertDialogProps extends DialogProps$1 {
     variant?: "info" | "confirmation" | "warning" | "error" | "destructive";
@@ -60,7 +62,7 @@ interface ButtonGroupProps extends React.PropsWithChildren {
 }
 declare function ButtonGroup({ orientation, alignment, ariaLabel, children, ...props }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
-declare function Calendar({ ...props }: CalendarProps<DateValue>): react_jsx_runtime.JSX.Element;
+declare function Calendar({ visibleDuration, ...props }: CalendarProps<DateValue>): react_jsx_runtime.JSX.Element;
 
 interface CalloutProps extends React.PropsWithChildren {
     variant?: "lightGrey" | "lightBlue" | "lightGold" | "Blue" | "Grey" | "Black";
@@ -227,6 +229,16 @@ declare function Link({ children, size, danger, isButton, buttonVariant, isUnsty
 
 declare function Modal({ children, ...props }: ModalOverlayProps): react_jsx_runtime.JSX.Element;
 
+interface ProgressBarProps extends ProgressBarProps$1 {
+    size?: "small" | "medium" | "large";
+}
+declare function ProgressBar({ size, valueLabel, ...props }: ProgressBarProps): react_jsx_runtime.JSX.Element;
+
+interface ProgressCircleProps extends ProgressBarProps$1 {
+    size?: "small" | "medium" | "large";
+}
+declare function ProgressCircle({ size, valueLabel, ...props }: ProgressCircleProps): react_jsx_runtime.JSX.Element;
+
 declare function Radio({ value, children, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
 
 interface RadioGroupProps extends RadioGroupProps$1 {
@@ -240,6 +252,26 @@ interface RadioGroupProps extends RadioGroupProps$1 {
 }
 declare function RadioGroup({ orientation, label, description, children, errorMessage, flexWrap, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
 
+interface TagProps extends TagProps$1 {
+    /**
+     * Icon that appears to the left of the `textValue` field
+     */
+    icon?: React.ReactNode;
+    /**
+     * Background color
+     */
+    color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
+    /**
+     * tagStyle
+     */
+    tagStyle?: "rectangular" | "circular";
+    /**
+     * size
+     */
+    size?: "xsmall" | "small" | "medium";
+}
+declare function Tag({ color, tagStyle, size, icon, id, textValue, ...props }: TagProps): react_jsx_runtime.JSX.Element;
+
 interface ListBoxItemProps extends ListBoxItemProps$1 {
     /** Text label for the option. Provide an `id` if this is not unique. */
     label: string;
@@ -251,6 +283,10 @@ interface ListBoxItemProps extends ListBoxItemProps$1 {
     iconLeft?: React.ReactElement;
     /** Right icon slot */
     iconRight?: React.ReactElement;
+    /** Optional color token forwarded to selected tags */
+    color?: TagProps["color"];
+    /** Optional style token forwarded to selected tags */
+    tagStyle?: TagProps["tagStyle"];
 }
 interface SelectionSectionProps {
     id: Key;
@@ -259,7 +295,7 @@ interface SelectionSectionProps {
     /** Flat list of options within the section */
     items: ListBoxItemProps[];
 }
-interface SelectProps<T extends object> extends SelectProps$1<T> {
+interface SelectProps<T extends object, M extends "single" | "multiple" = "single"> extends SelectProps$1<T, M> {
     /** Use `items` for a flat list of options */
     items?: ListBoxItemProps[];
     /** Use `sections` for a sectioned list with `items` options in each section */
@@ -274,9 +310,16 @@ interface SelectProps<T extends object> extends SelectProps$1<T> {
     description?: string;
     /** Used for data validation and error handling */
     errorMessage?: string | ((validation: ValidationResult) => string);
+    /** Overflow behaviour */
+    overflow?: "wrap" | "scroll";
+}
+/** Select displays a collapsible list of options and allows a user to select one or more of them. */
+declare function Select<T extends object, M extends "single" | "multiple" = "single">({ items, sections, label, description, placeholder, size, errorMessage, selectionMode, overflow, ...props }: SelectProps<T, M>): react_jsx_runtime.JSX.Element;
+
+interface SeparatorProps extends SeparatorProps$1 {
+    size?: "small" | "medium" | "large";
 }
-/** Select displays a collapsible list of options and allows a user to select one of them. */
-declare function Select<T extends object>({ items, sections, label, description, placeholder, size, errorMessage, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function Separator({ size, ...props }: SeparatorProps): react_jsx_runtime.JSX.Element;
 
 declare function SvgBcLogo({ id }: {
     id?: string | undefined;
@@ -342,6 +385,12 @@ declare function SvgDashIcon({ id }: {
     id?: string | undefined;
 }): react_jsx_runtime.JSX.Element;
 
+interface SvgPlaceholderIconProps {
+    /** Width and height of the placeholder icon, defaults to 20 */
+    size?: number;
+}
+declare function SvgPlaceholderIcon({ size, ...props }: SvgPlaceholderIconProps): react_jsx_runtime.JSX.Element;
+
 declare function SvgPlusIcon({ id }: {
     id?: string | undefined;
 }): react_jsx_runtime.JSX.Element;
@@ -360,26 +409,6 @@ declare function SvgReactAriaIcon({ id }: {
     id?: string | undefined;
 }): react_jsx_runtime.JSX.Element;
 
-interface TagProps extends TagProps$1 {
-    /**
-     * Icon that appears to the left of the `textValue` field
-     */
-    icon?: React.ReactNode;
-    /**
-     * Background color
-     */
-    color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
-    /**
-     * tagStyle
-     */
-    tagStyle?: "rectangular" | "circular";
-    /**
-     * size
-     */
-    size?: "small" | "medium";
-}
-declare function Tag({ color, tagStyle, size, icon, id, textValue, }: TagProps): react_jsx_runtime.JSX.Element;
-
 interface TagGroupProps extends TagGroupProps$1 {
     /**
      * Labels the TagGroup, appears above the tags.
@@ -429,6 +458,14 @@ interface TextFieldProps extends TextFieldProps$1 {
 }
 declare function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
 
+interface TimeFieldProps<T extends TimeValue> extends TimeFieldProps$1<T> {
+    size?: "medium" | "small";
+    label?: string;
+    description?: string;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+}
+declare function TimeField<T extends TimeValue>({ size, label, description, errorMessage, isRequired, ...props }: TimeFieldProps<T>): react_jsx_runtime.JSX.Element;
+
 interface ToggleButtonProps extends ToggleButtonProps$1 {
     size?: "small" | "medium";
     isIconButton?: boolean;
@@ -456,4 +493,4 @@ interface NumberFieldProps extends NumberFieldProps$1 {
 }
 declare function NumberField({ size, label, description, errorMessage, ...props }: NumberFieldProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionGroup, AlertBanner, AlertDialog, Button, ButtonGroup, Calendar, Callout, Checkbox, CheckboxGroup, DatePicker, Dialog, Footer, FooterLinks, Form, Header, Heading, InlineAlert, Link, Modal, NumberField, Radio, RadioGroup, Select, SvgBcLogo, SvgBcOutlineIcon, SvgBetaIcon, SvgCalendarIcon, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronLeftIcon, SvgChevronRightIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon$1 as SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgDashIcon as SvgMinusIcon, SvgPlusIcon, SvgReactAriaIcon, SvgTooltipArrowUp, SvgUpRightFromSquareIcon, Switch, Tag, TagGroup, TagList, Text, TextArea, TextField, ToggleButton, ToggleButtonGroup, Tooltip };
+export { Accordion, AccordionGroup, AlertBanner, AlertDialog, Button, ButtonGroup, Calendar, Callout, Checkbox, CheckboxGroup, DatePicker, Dialog, Footer, FooterLinks, Form, Header, Heading, InlineAlert, Link, Modal, NumberField, ProgressBar, ProgressCircle, Radio, RadioGroup, Select, Separator, SvgBcLogo, SvgBcOutlineIcon, SvgBetaIcon, SvgCalendarIcon, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronLeftIcon, SvgChevronRightIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon$1 as SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgDashIcon as SvgMinusIcon, SvgPlaceholderIcon, SvgPlusIcon, SvgReactAriaIcon, SvgTooltipArrowUp, SvgUpRightFromSquareIcon, Switch, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcgov/design-system-react-components",
-  "version": "0.6.1",
+  "version": "0.7.0-pr643",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/bcgov/design-system.git",
@@ -13,6 +13,8 @@
     "build:types": "tsc -p tsconfig.types.json",
     "build:dts": "rollup -c rollup.dts.config.js",
     "build": "npm run clean && npm run build:js && npm run build:types && npm run build:dts",
+    "format:check": "npx prettier . --check",
+    "format": "npx prettier . --write",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "storybook-dev": "storybook dev -p 6006",
     "storybook-build": "storybook build",
@@ -40,8 +42,10 @@
     "dist/cjs"
   ],
   "dependencies": {
-    "@bcgov/design-tokens": "3.2.0",
-    "react-aria-components": "1.14.0"
+    "@bcgov/design-tokens": "4.0.0",
+    "@react-aria/datepicker": "3.17.0",
+    "@react-aria/i18n": "3.13.0",
+    "react-aria-components": "1.17.0"
   },
   "peerDependencies": {
     "@bcgov/bc-sans": "^2.1.0",
@@ -49,47 +53,56 @@
     "react-dom": "^16.14.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@react-stately/data": "3.15.0",
-    "@rollup/plugin-commonjs": "29.0.0",
+    "@eslint/js": "10.0.1",
+    "@figma/code-connect": "1.4.5",
+    "@react-stately/data": "3.16.0",
+    "@rollup/plugin-commonjs": "29.0.2",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-typescript": "12.3.0",
-    "@storybook/addon-a11y": "10.1.10",
-    "@storybook/addon-docs": "10.1.10",
-    "@storybook/addon-links": "10.1.10",
-    "@storybook/addon-vitest": "10.1.10",
-    "@storybook/react-vite": "10.1.10",
+    "@storybook/addon-a11y": "10.4.0",
+    "@storybook/addon-docs": "10.4.0",
+    "@storybook/addon-links": "10.4.0",
+    "@storybook/addon-vitest": "10.4.0",
+    "@storybook/react-vite": "10.4.0",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.1",
-    "@types/react": "19.2.7",
+    "@testing-library/react": "16.3.2",
+    "@types/node": "25.9.1",
+    "@types/react": "19.2.15",
     "@types/react-dom": "19.2.3",
-    "@typescript-eslint/eslint-plugin": "8.50.1",
-    "@typescript-eslint/parser": "8.50.1",
-    "@vitejs/plugin-react": "5.1.2",
-    "@vitest/browser-playwright": "4.0.14",
-    "@vitest/coverage-v8": "4.0.14",
+    "@typescript-eslint/eslint-plugin": "8.59.4",
+    "@typescript-eslint/parser": "8.59.4",
+    "@vitejs/plugin-react": "6.0.2",
+    "@vitest/browser-playwright": "4.1.7",
+    "@vitest/coverage-v8": "4.1.7",
     "axe-playwright": "2.2.2",
-    "eslint": "9.39.2",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-react-refresh": "0.4.26",
-    "eslint-plugin-storybook": "10.1.10",
-    "globals": "16.5.0",
-    "jsdom": "27.4.0",
-    "playwright": "1.57.0",
-    "rollup": "4.54.0",
-    "rollup-plugin-dts": "6.3.0",
+    "eslint": "10.4.0",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "eslint-plugin-react-refresh": "0.5.2",
+    "eslint-plugin-storybook": "10.4.0",
+    "globals": "17.5.0",
+    "jsdom": "29.1.1",
+    "playwright": "1.60.0",
+    "prettier": "3.8.3",
+    "rollup": "4.60.4",
+    "rollup-plugin-dts": "6.4.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
-    "storybook": "10.1.10",
+    "storybook": "10.4.0",
     "tslib": "2.8.1",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.50.1",
-    "vite": "7.3.0",
-    "vitest": "4.0.14"
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.59.4",
+    "vite": "8.0.13",
+    "vitest": "4.1.7"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "*"
   },
+  "overrides": {
+    "eslint-plugin-react-hooks": {
+      "zod-validation-error": "^4.0.0"
+    }
+  },
   "author": "Tyler Krys <Tyler.Krys@gov.bc.ca>",
   "license": "Apache-2.0",
   "bugs": {