@kaizen/components 3.0.6 → 3.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -110,9 +110,9 @@
     "prosemirror-schema-basic": "^1.2.4",
     "prosemirror-schema-list": "^1.5.1",
     "prosemirror-state": "^1.4.4",
-    "prosemirror-transform": "^1.11.0",
+    "prosemirror-transform": "^1.12.0",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.41.7",
+    "prosemirror-view": "^1.41.8",
     "react-animate-height": "^3.2.3",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
@@ -122,7 +122,7 @@
     "react-popper": "^2.3.0",
     "react-select": "^5.10.2",
     "react-textfit": "^1.1.1",
-    "use-debounce": "^10.1.0",
+    "use-debounce": "^10.1.1",
     "uuid": "^13.0.0"
   },
   "dependenciesComments": {
@@ -130,8 +130,9 @@
   },
   "devDependencies": {
     "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^4.1.0",
-    "@cultureamp/package-bundler": "^2.4.4",
+    "@cultureamp/i18n-react-intl": "^4.1.1",
+    "@cultureamp/package-bundler": "^4.0.1",
+    "cssnano": "^7.1.4",
     "@testing-library/dom": "^10.4.1",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -154,14 +155,14 @@
     "react-dom": "^19.2.4",
     "react-highlight": "^0.15.0",
     "react-intl": "^7.1.14",
-    "rollup": "^4.59.0",
+    "rollup": "^4.60.1",
     "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.21.0",
-    "@kaizen/design-tokens": "11.0.2"
+    "@kaizen/design-tokens": "11.0.3"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/Avatar/Avatar.module.css

@@ -74,7 +74,7 @@
     border-radius: var(--spacing-4);
   }
 
-  .fallbackIcon {
+  .wrapper .fallbackIcon {
     color: rgb(var(--color-purple-800-rgb), 0.7);
     font-size: calc(var(--avatar-x-y) * 0.7);
   }

package/src/FieldMessage/FieldMessage.module.css

@@ -0,0 +1,74 @@
+@layer kz-components {
+  :root {
+    --message-icon-size: 1.25rem;
+    --validation-message-padding: 0.5625rem;
+    --form-text-color-label: rgb(var(--color-purple-800-rgb), 0.7);
+    --form-text-color-label-reversed: rgb(var(--color-white-rgb), 0.8);
+  }
+
+  .message {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: var(--spacing-6);
+  }
+
+  .default {
+    color: var(--form-text-color-label);
+
+    &.reversed {
+      color: var(--form-text-color-label-reversed);
+    }
+  }
+
+  .error,
+  .caution {
+    border-radius: var(--border-solid-border-radius);
+    padding: var(--validation-message-padding);
+    color: var(--color-purple-800);
+  }
+
+  .error {
+    background: var(--color-red-100);
+    opacity: 1;
+
+    &.reversed {
+      background: var(--color-red-300);
+    }
+  }
+
+  .caution {
+    background: var(--color-yellow-100);
+    opacity: 1;
+
+    &.reversed {
+      background: var(--color-yellow-400);
+    }
+  }
+
+  .positionBottom {
+    margin-top: var(--spacing-6);
+  }
+
+  .positionTop {
+    margin-bottom: var(--spacing-6);
+  }
+
+  .warningIcon {
+    display: inline-flex;
+    width: var(--message-icon-size);
+    align-self: flex-start;
+
+    .error & {
+      color: var(--color-red-500);
+    }
+
+    .caution & {
+      color: var(--color-yellow-700);
+    }
+
+    .reversed & {
+      color: var(--color-purple-800);
+    }
+  }
+}

package/src/FieldMessage/FieldMessage.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { Icon } from '~components/Icon'
 import { Text } from '~components/Text'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './FieldMessage.module.scss'
+import styles from './FieldMessage.module.css'
 
 export type FieldMessageStatus = 'default' | 'success' | 'error' | 'caution'
 

package/src/Link/Link.module.css

@@ -21,7 +21,7 @@
     border-bottom: var(--spacing-1) solid var(--link-text-color, var(--color-blue-500));
   }
 
-  .icon > * {
+  .link .icon > * {
     vertical-align: text-bottom;
     font-size: var(--icon-font-size, 1em);
   }

package/src/Notification/subcomponents/NotificationIcon/NotificationIcon.module.css

@@ -1,5 +1,6 @@
 @layer kz-components {
-  .notificationIcon {
+  /* Doubled class raises specificity to (0,2,0) to override Icon's own font-size rule */
+  .notificationIcon.notificationIcon {
     font-size: inherit;
   }
 }

package/src/ProgressBar/{ProgressBar.module.scss → ProgressBar.module.css}

@@ -1,21 +1,16 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
-
 @layer kz-components {
-  $height: 10px;
-
   .subtext {
-    color: $color-purple-800;
-    padding-top: $spacing-6;
+    color: var(--color-purple-800);
+    padding-top: var(--spacing-6);
     text-align: center;
-    opacity: 80%;
+    opacity: 0.8;
   }
 
   .progressBackground {
     width: 100%;
-    background: $color-gray-300;
-    border-radius: $height;
-    height: $height;
+    background: var(--color-gray-300);
+    border-radius: 10px;
+    height: 10px;
     overflow: hidden;
     position: relative;
   }
@@ -23,15 +18,15 @@
   .progress {
     position: absolute;
     inset: 0;
-    border-radius: $height;
+    border-radius: 10px;
     overflow: hidden;
     transition: transform 200ms ease;
     background-color: var(--progressbar-background-color);
   }
 
-  // ------------------------------
-  // Colors
-  // ------------------------------
+  /* ------------------------------
+  Colors
+  ------------------------------ */
   .blue {
     --progressbar-background-color: var(--color-blue-400);
   }
@@ -51,7 +46,7 @@
   .isAnimating {
     &::after {
       background: linear-gradient(90deg, transparent, var(--color-white) 75%, transparent);
-      opacity: 25%;
+      opacity: 0.25;
       content: '';
       position: absolute;
       top: 0;

package/src/ProgressBar/ProgressBar.tsx

@@ -4,7 +4,7 @@ import { Heading } from '~components/Heading'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { Label } from './subcomponents/Label'
 import { calculatePercentage } from './utils/calculatePercentage'
-import styles from './ProgressBar.module.scss'
+import styles from './ProgressBar.module.css'
 
 export type ProgressBarColor = {
   color: 'blue' | 'green' | 'red' | 'yellow'

package/src/ProgressBar/subcomponents/Label/Label.module.css

@@ -0,0 +1,7 @@
+@layer kz-components {
+  .label {
+    padding-bottom: var(--spacing-6);
+    color: var(--color-purple-800);
+    text-align: center;
+  }
+}

package/src/ProgressBar/subcomponents/Label/Label.tsx

@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react'
 import { Heading } from '~components/Heading'
-import styles from './Label.module.scss'
+import styles from './Label.module.css'
 
 type Label = {
   content: ReactNode

package/src/TimeField/TimeField.module.css

@@ -16,7 +16,8 @@
     color: var(--color-purple-800);
   }
 
-  .label {
+  /* Doubled class raises specificity to (0,2,0) to override Label's own display rule */
+  .label.label {
     display: block;
     margin-bottom: var(--spacing-6);
   }

package/src/__alpha__/SingleSelect/subcomponents/SelectTrigger/SelectTrigger.module.css

@@ -51,7 +51,7 @@
     background-color: var(--color-gray-100);
   }
 
-  .disabledText {
+  .trigger .disabledText {
     color: var(--color-gray-500);
   }
 

package/dist/cjs/src/FieldMessage/FieldMessage.module.scss.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-var styles = {
-  "message": "FieldMessage-module_message__bKbYp",
-  "default": "FieldMessage-module_default__tpp8j",
-  "reversed": "FieldMessage-module_reversed__FCi8c",
-  "error": "FieldMessage-module_error__OxUCB",
-  "caution": "FieldMessage-module_caution__EPqo4",
-  "positionBottom": "FieldMessage-module_positionBottom__rLWzS",
-  "positionTop": "FieldMessage-module_positionTop__8Hjpb",
-  "warningIcon": "FieldMessage-module_warningIcon__0y1jx"
-};
-module.exports = styles;

package/dist/cjs/src/ProgressBar/ProgressBar.module.scss.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var styles = {
-  "subtext": "ProgressBar-module_subtext__eizyu",
-  "progressBackground": "ProgressBar-module_progressBackground__5qzp5",
-  "progress": "ProgressBar-module_progress__X1IHw",
-  "blue": "ProgressBar-module_blue__WEID8",
-  "green": "ProgressBar-module_green__J1T96",
-  "red": "ProgressBar-module_red__Ssd61",
-  "yellow": "ProgressBar-module_yellow__bcHWO",
-  "isAnimating": "ProgressBar-module_isAnimating__F6AxQ",
-  "pulse": "ProgressBar-module_pulse__RGaQm"
-};
-module.exports = styles;

package/dist/cjs/src/ProgressBar/subcomponents/Label/Label.module.scss.cjs

@@ -1,6 +0,0 @@
-'use strict';
-
-var styles = {
-  "label": "Label-module_label__zqjpR"
-};
-module.exports = styles;

package/dist/esm/src/FieldMessage/FieldMessage.module.scss.mjs

@@ -1,11 +0,0 @@
-var styles = {
-  "message": "FieldMessage-module_message__bKbYp",
-  "default": "FieldMessage-module_default__tpp8j",
-  "reversed": "FieldMessage-module_reversed__FCi8c",
-  "error": "FieldMessage-module_error__OxUCB",
-  "caution": "FieldMessage-module_caution__EPqo4",
-  "positionBottom": "FieldMessage-module_positionBottom__rLWzS",
-  "positionTop": "FieldMessage-module_positionTop__8Hjpb",
-  "warningIcon": "FieldMessage-module_warningIcon__0y1jx"
-};
-export { styles as default };

package/dist/esm/src/ProgressBar/ProgressBar.module.scss.mjs

@@ -1,12 +0,0 @@
-var styles = {
-  "subtext": "ProgressBar-module_subtext__eizyu",
-  "progressBackground": "ProgressBar-module_progressBackground__5qzp5",
-  "progress": "ProgressBar-module_progress__X1IHw",
-  "blue": "ProgressBar-module_blue__WEID8",
-  "green": "ProgressBar-module_green__J1T96",
-  "red": "ProgressBar-module_red__Ssd61",
-  "yellow": "ProgressBar-module_yellow__bcHWO",
-  "isAnimating": "ProgressBar-module_isAnimating__F6AxQ",
-  "pulse": "ProgressBar-module_pulse__RGaQm"
-};
-export { styles as default };

package/dist/esm/src/ProgressBar/subcomponents/Label/Label.module.scss.mjs

@@ -1,4 +0,0 @@
-var styles = {
-  "label": "Label-module_label__zqjpR"
-};
-export { styles as default };

package/dist/types/TabsV1/Tabs.d.ts

@@ -1,29 +0,0 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-export type TabsProps = {
-    /**
-     * Index of tab to show by default
-     * Only works in uncontrolled mode (when no selectedIndex is provided)
-     */
-    defaultIndex?: number;
-    /**
-     * Set the selected tab explictly.
-     * Enabled controlled mode, meaning you're also responsible for updating this using the onChange callback
-     */
-    selectedIndex?: number;
-    /**
-     * Callback on tab change
-     */
-    onChange?: (index: number) => void;
-    children: ReactNode;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-tabs--controlled Storybook}
- *
- * Wrapper around all of the tab subcomponents
- * Holds a TabList and TabPanels
- */
-export declare const Tabs: {
-    (props: TabsProps): JSX.Element;
-    displayName: string;
-};

package/dist/types/TabsV1/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Tabs';
-export * from './subcomponents';

package/dist/types/TabsV1/subcomponents/Tab.d.ts

@@ -1,21 +0,0 @@
-import { type HTMLAttributes, type ReactNode, type SyntheticEvent } from 'react';
-import { type OverrideClassName } from "../../types/OverrideClassName";
-export type TabProps = {
-    /**
-     * Gets injected by TabList, no need to specify yourself
-     */
-    isSelected?: boolean;
-    /**
-     * Adds a Kaizen Badge component to the tab.
-     * Comes with some logic baked in - changes variant based on active/focus/hover state.
-     */
-    badge?: string;
-    disabled?: boolean;
-    children: ReactNode;
-    onBlur?: (e: SyntheticEvent) => void;
-    onFocus?: (e: SyntheticEvent) => void;
-} & OverrideClassName<Omit<HTMLAttributes<HTMLButtonElement>, 'onFocus' | 'onBlur' | 'onMouseEnter' | 'onMouseLeave'>>;
-/**
- * A tab button
- */
-export declare const Tab: (props: TabProps) => JSX.Element;

package/dist/types/TabsV1/subcomponents/TabList.d.ts

@@ -1,17 +0,0 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-import { type OverrideClassName } from "../../types/OverrideClassName";
-export type TabListProps = {
-    /**
-     * Accessible name for the set of tabs
-     */
-    'aria-label': string;
-    /**
-     * Removes the built in padding
-     */
-    'noPadding'?: boolean;
-    'children': ReactNode;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
-/**
- * Wrapper for the tabs themselves
- */
-export declare const TabList: (props: TabListProps) => JSX.Element;

package/dist/types/TabsV1/subcomponents/TabPanel.d.ts

@@ -1,9 +0,0 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-import { type OverrideClassName } from "../../types/OverrideClassName";
-export type TabPanelProps = {
-    children: ReactNode;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
-/**
- * Wrapper for the content that shows when tab is active
- */
-export declare const TabPanel: (props: TabPanelProps) => JSX.Element;

package/dist/types/TabsV1/subcomponents/TabPanels.d.ts

@@ -1,9 +0,0 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-import { type OverrideClassName } from "../../types/OverrideClassName";
-export type TabPanelsProps = {
-    children: ReactNode;
-} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
-/**
- * Wrapper for the content panels
- */
-export declare const TabPanels: (props: TabPanelsProps) => JSX.Element;

package/dist/types/TabsV1/subcomponents/index.d.ts

@@ -1,4 +0,0 @@
-export * from './Tab';
-export * from './TabList';
-export * from './TabPanel';
-export * from './TabPanels';

package/src/FieldMessage/FieldMessage.module.scss

@@ -1,76 +0,0 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/border';
-
-@layer kz-components {
-  $message-icon-size: 1.25rem;
-  $validation-message-padding: 0.5625rem;
-  $form-text-color-label: rgba($color-purple-800-rgb, 0.7);
-  $form-text-color-label-reversed: rgba($color-white-rgb, 0.8);
-
-  .message {
-    display: flex;
-    position: relative;
-    align-items: center;
-    gap: $spacing-6;
-  }
-
-  .default {
-    color: $form-text-color-label;
-
-    &.reversed {
-      color: $form-text-color-label-reversed;
-    }
-  }
-
-  .error,
-  .caution {
-    border-radius: $border-solid-border-radius;
-    padding: $validation-message-padding;
-    color: $color-purple-800;
-  }
-
-  .error {
-    background: $color-red-100;
-    opacity: 100%;
-
-    &.reversed {
-      background: $color-red-300;
-    }
-  }
-
-  .caution {
-    background: $color-yellow-100;
-    opacity: 100%;
-
-    &.reversed {
-      background: $color-yellow-400;
-    }
-  }
-
-  .positionBottom {
-    margin-top: $spacing-6;
-  }
-
-  .positionTop {
-    margin-bottom: $spacing-6;
-  }
-
-  .warningIcon {
-    display: inline-flex;
-    width: $message-icon-size;
-    align-self: flex-start;
-
-    .error & {
-      color: $color-red-500;
-    }
-
-    .caution & {
-      color: var(--color-yellow-700);
-    }
-
-    .reversed & {
-      color: $color-purple-800;
-    }
-  }
-}

package/src/ProgressBar/subcomponents/Label/Label.module.scss

@@ -1,10 +0,0 @@
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
-
-@layer kz-components {
-  .label {
-    padding-bottom: $spacing-6;
-    color: $color-purple-800;
-    text-align: center;
-  }
-}

package/src/TabsV1/Tabs.tsx

@@ -1,38 +0,0 @@
-import React, { type HTMLAttributes, type ReactNode } from 'react'
-import { Tabs as ReachTabs } from '@reach/tabs'
-
-export type TabsProps = {
-  /**
-   * Index of tab to show by default
-   * Only works in uncontrolled mode (when no selectedIndex is provided)
-   */
-  defaultIndex?: number
-  /**
-   * Set the selected tab explictly.
-   * Enabled controlled mode, meaning you're also responsible for updating this using the onChange callback
-   */
-  selectedIndex?: number
-  /**
-   * Callback on tab change
-   */
-  onChange?: (index: number) => void
-  children: ReactNode
-} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>
-
-/**
- * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081929117/Tabs Guidance} |
- * {@link https://cultureamp.design/?path=/docs/components-tabs--controlled Storybook}
- *
- * Wrapper around all of the tab subcomponents
- * Holds a TabList and TabPanels
- */
-export const Tabs = (props: TabsProps): JSX.Element => {
-  const { defaultIndex, selectedIndex, onChange, children, ...restProps } = props
-  return (
-    <ReachTabs defaultIndex={defaultIndex} index={selectedIndex} onChange={onChange} {...restProps}>
-      {children}
-    </ReachTabs>
-  )
-}
-
-Tabs.displayName = 'Tabs'

package/src/TabsV1/_docs/Tabs.stories.tsx

@@ -1,78 +0,0 @@
-import React, { useState } from 'react'
-import { type Meta, type StoryObj } from '@storybook/react'
-import { Button } from '~components/ButtonV1'
-import { Card } from '~components/Card'
-import { Text } from '~components/Text'
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '../index'
-
-const meta = {
-  title: 'Components/Tabs/Tabs (deprecated)',
-  component: Tabs,
-  args: {
-    children: (
-      <>
-        <TabList aria-label="Tabs">
-          <Tab>Tab 1</Tab>
-          <Tab>Tab 2</Tab>
-          <Tab badge="3">Tab 3</Tab>
-          <Tab disabled>Disabled Tab</Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel classNameOverride="p-24">
-            <Text variant="body">Content 1</Text>
-          </TabPanel>
-          <TabPanel classNameOverride="p-24">
-            <Text variant="body">Content 2</Text>
-          </TabPanel>
-          <TabPanel classNameOverride="p-24">
-            <Text variant="body">Content 3</Text>
-          </TabPanel>
-        </TabPanels>
-      </>
-    ),
-  },
-  tags: ['!dev'],
-} satisfies Meta<typeof Tabs>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Playground: Story = {
-  parameters: {
-    chromatic: { disable: false },
-    docs: {
-      canvas: {
-        sourceState: 'shown',
-      },
-    },
-  },
-  args: {
-    defaultIndex: 1,
-
-    onChange: (index): void => console.log('Tab changed to ', index),
-  },
-}
-
-export const Controlled: Story = {
-  render: (args) => {
-    const [selectedIndex, setSelectedIndex] = useState<number>(0)
-    return (
-      <>
-        <Tabs {...args} selectedIndex={selectedIndex} onChange={setSelectedIndex} />
-        <Button label="Switch to tab 2" onClick={(): void => setSelectedIndex(1)} />
-      </>
-    )
-  },
-}
-
-export const UsageInCard: Story = {
-  parameters: {
-    backgrounds: { default: 'Gray 100' },
-  },
-  render: (args) => (
-    <Card>
-      <Tabs {...args} />
-    </Card>
-  ),
-}

package/src/TabsV1/index.ts

@@ -1,2 +0,0 @@
-export * from './Tabs'
-export * from './subcomponents'