@kaizen/components 3.3.2 → 3.3.4

package/dist/types/Icon/CustomIcons.d.ts

@@ -0,0 +1,7 @@
+import type { FC, SVGProps } from 'react';
+type CustomIcon = FC<SVGProps<SVGSVGElement> & {
+    color?: string;
+    size?: number;
+}>;
+export declare const UserSettingsIcon: CustomIcon;
+export {};

package/dist/types/index.d.ts

@@ -25,6 +25,7 @@ export * from './Focusable';
 export * from './GuidanceBlock';
 export * from './Heading';
 export * from './Icon';
+export * from './Icon/CustomIcons';
 export * from './Illustration';
 export * from './Input';
 export * from './KaizenProvider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.3.2",
+  "version": "3.3.4",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -106,13 +106,13 @@
     "prosemirror-history": "^1.5.0",
     "prosemirror-inputrules": "^1.5.1",
     "prosemirror-keymap": "^1.2.3",
-    "prosemirror-model": "^1.25.9",
+    "prosemirror-model": "^1.25.10",
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.4",
     "prosemirror-transform": "^1.12.0",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.41.9",
+    "prosemirror-view": "^1.42.0",
     "react-animate-height": "^3.2.4",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
@@ -123,15 +123,16 @@
     "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
     "use-debounce": "^10.1.1",
-    "uuid": "^14.0.0"
+    "uuid": "^14.0.1"
   },
   "dependenciesComments": {
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^4.1.6",
+    "@cultureamp/i18n-react-intl": "^4.2.1",
     "@cultureamp/package-bundler": "^4.0.1",
+    "@svgr/rollup": "^8.1.0",
     "cssnano": "^7.1.9",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
@@ -139,30 +140,30 @@
     "@types/react-highlight": "^0.12.8",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^11.0.0",
-    "autoprefixer": "^10.5.0",
+    "autoprefixer": "^10.5.2",
     "concat-cli": "^4.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-axe": "^10.0.0",
     "lodash.isempty": "^4.4.0",
     "normalize.css": "^8.0.1",
-    "postcss": "^8.5.15",
+    "postcss": "^8.5.16",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
-    "postcss-preset-env": "^11.3.1",
+    "postcss-preset-env": "^11.3.2",
     "postcss-scss": "^4.0.9",
-    "query-string": "^9.4.0",
+    "query-string": "^9.4.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-highlight": "^0.15.0",
-    "react-intl": "^10.1.13",
+    "react-intl": "^10.1.15",
     "rollup": "^4.62.2",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.4",
     "svgo": "^4.0.1",
     "ts-patch": "^3.3.0",
     "tslib": "^2.8.1",
-    "tsx": "^4.22.4",
-    "@kaizen/design-tokens": "11.0.12"
+    "tsx": "^4.23.0",
+    "@kaizen/design-tokens": "11.0.13"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",
@@ -188,7 +189,8 @@
     "build:global-styles": "postcss ./styles/global.css --output dist/global.css",
     "build:combine-styles": "concat-cli -f ./dist/global.css ./dist/styles.css -o ./dist/styles.css && rm ./dist/global.css",
     "build:styles": "pnpm build:global-styles && pnpm build:combine-styles",
-    "test": "FORCE_COLOR=1 vitest --config ../../vite.config.ts",
+    "test": "FORCE_COLOR=1 vitest run --config ../../vite.config.ts",
+    "test:watch": "FORCE_COLOR=1 vitest --config ../../vite.config.ts",
     "update-icons": "./src/Icon/bin/update-icons.sh",
     "i18n:extract": "pnpm i18n-extract",
     "clean": "rimraf 'dist' 'node_modules' '.turbo'",

package/src/AvatarGroup/AvatarGroup.tsx

@@ -5,8 +5,7 @@ import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './AvatarGroup.module.css'
 
 export type AvatarGroupAvatarProps =
-  | Omit<GenericAvatarProps, 'size'>
-  | Omit<CompanyAvatarProps, 'size'>
+  Omit<GenericAvatarProps, 'size'> | Omit<CompanyAvatarProps, 'size'>
 
 export type AvatarGroupSize = 'small' | 'medium' | 'large'
 export type AvatarList = [AvatarGroupAvatarProps, ...AvatarGroupAvatarProps[]]

package/src/Card/Card.tsx

@@ -6,14 +6,7 @@ import sharedAiStyles from '../../styles/utils/AIMoment.module.css'
 import styles from './Card.module.css'
 
 export type CardColors =
-  | 'blue'
-  | 'green'
-  | 'gray'
-  | 'orange'
-  | 'purple'
-  | 'red'
-  | 'white'
-  | 'yellow'
+  'blue' | 'green' | 'gray' | 'orange' | 'purple' | 'red' | 'white' | 'yellow'
 
 export type CardProps = {
   children?: React.ReactNode

package/src/DatePicker/DatePicker.tsx

@@ -25,14 +25,7 @@ import { getLocale, type DatePickerSupportedLocales } from './utils/getLocale'
 import { validateDate } from './utils/validateDate'
 
 type OmittedDateInputFieldProps =
-  | 'onClick'
-  | 'onFocus'
-  | 'onChange'
-  | 'onBlur'
-  | 'onButtonClick'
-  | 'value'
-  | 'locale'
-  | 'id'
+  'onClick' | 'onFocus' | 'onChange' | 'onBlur' | 'onButtonClick' | 'value' | 'locale' | 'id'
 
 export type DatePickerProps = {
   id?: string

package/src/Filter/FilterSelect/FilterSelect.tsx

@@ -20,12 +20,7 @@ import { type SingleSelectItem, type SingleSelectOption } from './types'
 import styles from './FilterSelect.module.css'
 
 type OmittedAriaSelectProps =
-  | 'label'
-  | 'children'
-  | 'isOpen'
-  | 'onOpenChange'
-  | 'defaultOpen'
-  | 'items'
+  'label' | 'children' | 'isOpen' | 'onOpenChange' | 'defaultOpen' | 'items'
 
 export type FilterSelectProps<Option extends SingleSelectOption = SingleSelectOption> = {
   isOpen: boolean

package/src/Heading/Heading.tsx

@@ -16,25 +16,10 @@ export type HeadingVariants =
   | 'heading-6'
 
 export type AllowedHeadingTags =
-  | 'pre'
-  | 'p'
-  | 'div'
-  | 'span'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
+  'pre' | 'p' | 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'
 
 export type AllowedHeadingColors =
-  | 'dark'
-  | 'dark-reduced-opacity'
-  | 'white'
-  | 'white-reduced-opacity'
-  | 'positive'
-  | 'negative'
+  'dark' | 'dark-reduced-opacity' | 'white' | 'white-reduced-opacity' | 'positive' | 'negative'
 
 export type HeadingProps = {
   children: React.ReactNode

package/src/Icon/CustomIcons.ts

@@ -0,0 +1,8 @@
+import type { FC, SVGProps } from 'react'
+import _UserSettingsIcon from '../../assets/svgs/custom-icons/user-settings.svg'
+
+type CustomIcon = FC<SVGProps<SVGSVGElement> & { color?: string; size?: number }>
+
+// Cast forces tsc to emit the concrete FC type in .d.ts rather than a .svg path reference,
+// which consumers can't resolve (the declare module '*.svg' in types.d.ts is not included in the package output).
+export const UserSettingsIcon = _UserSettingsIcon as CustomIcon

package/src/Icon/_docs/Icon--api-specification.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
 import { ResourceLinks, KAIOInstallation } from '~storybook/components'
 import * as IconStories from './Icon.docs.stories'
+import * as IconsExtendedStories from './IconsCustom.stories'
 
 <Meta title="Components/Icon/API Specification" />
 
@@ -103,3 +104,22 @@ Whilst you have access to all Material Symbols, the following icons match the de
 Tip: Click on the icon you want for a quick copy!
 
 <Story of={IconStories.DefaultIconSet} />
+
+## Custom Icon
+
+Custom SVG icons that extend the icon set beyond Material Symbols. These are exported directly from `@kaizen/components` alongside `Icon`.
+
+`UserSettingsIcon` is the only custom icon currently available.
+
+```tsx
+import { UserSettingsIcon } from '@kaizen/components'
+;<UserSettingsIcon size={24} color="currentColor" />
+```
+
+Props:
+
+- **`size`** — sets both `width` and `height` in pixels. Defaults to `24`.
+- **`color`** — sets the icon color. Defaults to `currentColor`.
+
+<Canvas of={IconsExtendedStories.Playground} />
+<Controls of={IconsExtendedStories.Playground} />

package/src/Icon/_docs/Icon--usage-guidelines.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
 import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
 import * as IconStories from './Icon.docs.stories'
+import * as IconsExtendedStories from './IconsCustom.stories'
 
 <Meta title="Components/Icon/Usage Guidelines" />
 
@@ -144,3 +145,11 @@ Important information can be hidden if it's only explained in tooltips, leading
 Whilst you have access to all Material Symbols, the following icons match the default set we have in Figma.
 
 <Story of={IconStories.DefaultIconSet} />
+
+## Custom Icon
+
+Custom SVG icons that extend the icon set for use cases not covered by Material Symbols. Use these when a specific icon is required that does not exist in the Material Symbols library.
+
+`UserSettingsIcon` is the only custom icon currently available.
+
+<Canvas of={IconsExtendedStories.Playground} />

package/src/Icon/_docs/IconsCustom.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { UserSettingsIcon } from '../CustomIcons'
+
+const meta = {
+  title: 'Components/Icon/CustomIcons',
+  component: UserSettingsIcon,
+  args: {
+    size: 24,
+    color: '#000',
+  },
+} satisfies Meta<typeof UserSettingsIcon>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  parameters: {
+    docs: {
+      canvas: { sourceState: 'shown' },
+    },
+  },
+}

package/src/Menu/MenuHeader.tsx

@@ -6,7 +6,7 @@ export type MenuHeaderProps = { children: ReactNode }
 /**
  * A <header> element, used to title a MenuSection
  */
-export const MenuHeader = forwardRef<HTMLDivElement, MenuHeaderProps>(
-  (props, ref): JSX.Element => <Header ref={ref} {...props} />,
-)
+export const MenuHeader = forwardRef<HTMLDivElement, MenuHeaderProps>((props, ref): JSX.Element => (
+  <Header ref={ref} {...props} />
+))
 MenuHeader.displayName = 'MenuHeader'

package/src/RichTextEditor/types.ts

@@ -1,10 +1,5 @@
 export type ToolbarControlTypes =
-  | 'bold'
-  | 'italic'
-  | 'underline'
-  | 'orderedList'
-  | 'bulletList'
-  | 'link'
+  'bold' | 'italic' | 'underline' | 'orderedList' | 'bulletList' | 'link'
 
 export type ToolbarItems = {
   name: ToolbarControlTypes
@@ -17,23 +12,4 @@ export type ToolbarItems = {
 export type EditorContentArray = Record<string, any>[]
 
 export type EditorRows =
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
-  | 16
-  | 17
-  | 18
-  | 19
-  | 20
+  1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20

package/src/SingleSelect/types.ts

@@ -13,8 +13,7 @@ export type SingleSelectOptionGroup<Option extends SingleSelectOption> = {
 }
 
 export type SingleSelectItem<Option extends SingleSelectOption = SingleSelectOption> =
-  | Option
-  | SingleSelectOptionGroup<Option>
+  Option | SingleSelectOptionGroup<Option>
 
 export type SingleSelectOptionNode<Option extends SingleSelectOption = SingleSelectOption> =
   Node<Option> & {
@@ -30,5 +29,4 @@ export type SingleSelectOptionGroupNode<Option extends SingleSelectOption = Sing
   }
 
 export type SingleSelectItemNode<Option extends SingleSelectOption = SingleSelectOption> =
-  | SingleSelectOptionNode<Option>
-  | SingleSelectOptionGroupNode<Option>
+  SingleSelectOptionNode<Option> | SingleSelectOptionGroupNode<Option>

package/src/Text/Text.tsx

@@ -6,25 +6,10 @@ import styles from './Text.module.css'
 export type TextVariants = 'intro-lede' | 'body' | 'small' | 'extra-small'
 
 export type AllowedTextTags =
-  | 'pre'
-  | 'p'
-  | 'div'
-  | 'span'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
+  'pre' | 'p' | 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'
 
 export type AllowedTextColors =
-  | 'dark'
-  | 'dark-reduced-opacity'
-  | 'white'
-  | 'white-reduced-opacity'
-  | 'positive'
-  | 'negative'
+  'dark' | 'dark-reduced-opacity' | 'white' | 'white-reduced-opacity' | 'positive' | 'negative'
 
 export interface TextProps extends OverrideClassName<HTMLAttributes<HTMLElement>> {
   children: React.ReactNode

package/src/TitleBlock/types.ts

@@ -144,8 +144,7 @@ export type TitleBlockSelectProps = React.ComponentProps<typeof Select>
 export type TitleBlockDistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never
 
 export type TitleBlockAvatarProps =
-  | Omit<GenericAvatarProps, 'size'>
-  | Omit<CompanyAvatarProps, 'size'>
+  Omit<GenericAvatarProps, 'size'> | Omit<CompanyAvatarProps, 'size'>
 
 export type DefaultActionProps = TitleBlockButtonProps | TitleBlockCustomButtonProps
 

package/src/__alpha__/SingleSelect/types.ts

@@ -51,8 +51,7 @@ export type ComboBoxProps<T extends SelectItem> = Omit<
   SelectBaseProps
 
 export type SingleSelectProps<T extends SelectItem> =
-  | (ComboBoxProps<T> & { isComboBox?: true })
-  | (SelectProps<T> & { isComboBox?: false })
+  (ComboBoxProps<T> & { isComboBox?: true }) | (SelectProps<T> & { isComboBox?: false })
 
 // Trigger
 export type SelectTriggerProps = {

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './Focusable'
 export * from './GuidanceBlock'
 export * from './Heading'
 export * from './Icon'
+export * from './Icon/CustomIcons'
 export * from './Illustration'
 export * from './Input'
 export * from './KaizenProvider'