@kaizen/components 0.0.0-canary-introduce-next-entrypoint-20250225031042 → 0.0.0-canary-react-19-peer-20250303022312

package/dist/types/Link/Link.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { type LinkProps as RACLinkProps } from 'react-aria-components';
+import { type TextProps } from "../Text";
+export type LinkProps = BaseLinkProps & ((UnderlinedLink | NonUnderlinedLink) & (InlineLink | NonInlineLink));
+type BaseLinkProps = {
+    /** Controls the visual style of a link. @default 'primary' */
+    variant?: 'primary' | 'secondary' | 'white';
+    /** Controls the position of a link. @default 'end' */
+    iconPosition?: 'start' | 'end';
+} & Omit<RACLinkProps, 'children'> & {
+    /** Used as the label for the Link. */
+    children: RACLinkProps['children'];
+};
+type UnderlinedLink = {
+    /** Toggles the underline of the icon and children @default true */
+    isUnderlined?: true;
+    /** The icon to be displayed, optional when link is underlined */
+    icon?: JSX.Element;
+};
+type NonUnderlinedLink = {
+    /** Toggles the underline of the icon and children */
+    isUnderlined?: false;
+    /** The icon to be displayed, required when link is not underlined */
+    icon: JSX.Element;
+};
+type InlineLink = {
+    /** isInline assumes the Link is wrapped in a [Text](https://cultureamp.design/?path=/docs/components-text--docs) component */
+    isInline: true;
+    /** The size of the link, not passed when isInline */
+    size?: never;
+};
+type NonInlineLink = {
+    /** isInline assumes the Link is wrapped in a [Text](https://cultureamp.design/?path=/docs/components-text--docs) component @default false */
+    isInline?: false;
+    /** The size of the link. Sizes correlate to body text sizes. @default 'body' */
+    size?: TextProps['variant'];
+};
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};

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

@@ -0,0 +1 @@
+export * from './Link';

package/dist/types/Link/subcomponents/LinkContent.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+export type LinkContentProps = {
+    children: ReactNode;
+    icon?: JSX.Element;
+    iconPosition?: 'start' | 'end';
+    isUnderlined: boolean;
+};
+export declare const LinkContent: ({ children, icon, iconPosition, isUnderlined, }: LinkContentProps) => JSX.Element;

package/dist/types/__next__/Tooltip/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Tooltip';
 export * from './TooltipTrigger';
-export * from './subcomponents/Focusable';

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

@@ -5,3 +5,4 @@ export * from './Select';
 export * from './Tag';
 export * from './Tabs';
 export * from './Tooltip';
+export * from '../Focusable';

package/dist/types/index.d.ts

@@ -21,6 +21,7 @@ export * from './ErrorPage';
 export * from './FieldGroup';
 export * from './FieldMessage';
 export * from './Filter';
+export * from './Focusable';
 export * from './GuidanceBlock';
 export * from './Heading';
 export * from './Icon';
@@ -29,6 +30,7 @@ export * from './Input';
 export * from './KaizenProvider';
 export * from './Label';
 export * from './LabelledMessage';
+export * from './Link';
 export * from './LikertScaleLegacy';
 export * from './LinkButton';
 export * from './Loading';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-introduce-next-entrypoint-20250225031042",
+  "version": "0.0.0-canary-react-19-peer-20250303022312",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -185,7 +185,7 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
-    "@kaizen/design-tokens": "10.8.7",
+    "@kaizen/design-tokens": "0.0.0-canary-react-19-peer-20250303022312",
     "@kaizen/package-bundler": "2.0.4"
   },
   "devDependenciesComments": {
@@ -194,7 +194,7 @@
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",
-    "react": "^18.3.1",
+    "react": "^18.3.1 || ^19.0.0",
     "react-dom": "^18.3.1",
     "react-intl": "^6.6.8 || ^7.0.0",
     "typescript": "5.x"

package/src/Calendar/CalendarPopover/CalendarPopover.module.scss

@@ -17,3 +17,11 @@
     padding: $spacing-24;
   }
 }
+
+// Overrides for if the browser supports popovers. The inset unset is to fix a bug with RTL positioning https://github.com/floating-ui/floating-ui/issues/3221
+// Margin 0 because default styling for [popover] is margin: auto to center it.
+.calendarPopover[popover]:popover-open {
+  z-index: unset;
+  margin: 0;
+  inset: unset;
+}

package/src/Calendar/CalendarPopover/CalendarPopover.tsx

@@ -1,4 +1,4 @@
-import React, { useState, type HTMLAttributes } from 'react'
+import React, { useEffect, useState, type HTMLAttributes } from 'react'
 import {
   autoPlacement,
   autoUpdate,
@@ -30,7 +30,7 @@ export const CalendarPopover = ({
 }: CalendarPopoverProps): JSX.Element => {
   const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(null)
 
-  const { floatingStyles } = useFloating({
+  const { floatingStyles, update } = useFloating({
     placement: 'bottom-start',
     elements: {
       reference: referenceElement,
@@ -57,6 +57,15 @@ export const CalendarPopover = ({
     ...floatingOptions,
   })
 
+  useEffect(() => {
+    if (floatingElement && referenceElement) {
+      // @ts-expect-error this can be removed when we update to react 19
+      referenceElement.popoverTargetElement = floatingElement
+      floatingElement.showPopover?.()
+      update()
+    }
+  }, [referenceElement, floatingElement, update])
+
   return (
     <div
       ref={setFloatingElement}
@@ -64,6 +73,8 @@ export const CalendarPopover = ({
       className={classnames(styles.calendarPopover, classNameOverride)}
       role="dialog"
       aria-modal="true"
+      // @ts-expect-error this can be removed when we update to react 19
+      popover="manual"
       {...restProps}
     >
       {children}

package/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx

@@ -1,14 +1,13 @@
 import React from 'react'
 import { autoPlacement, offset, size } from '@floating-ui/react-dom'
 import { type Meta } from '@storybook/react'
-import { Text } from '~components/Text'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { CalendarRange } from '../../CalendarRange'
 import { CalendarSingle } from '../../CalendarSingle'
 import { CalendarPopover, type CalendarPopoverProps } from '../index'
 
 export default {
-  title: 'Components/Date controls/Calendars/CalendarPopover',
+  title: 'Components/Datepickers/Calendars (primitives)/CalendarPopover (primitive)',
   parameters: {
     chromatic: {
       disable: false,
@@ -150,56 +149,3 @@ export const StickerSheetRTL: StickerSheetStory = {
     textDirection: 'rtl',
   },
 }
-
-export const StickerSheetResponsive: StickerSheetStory = {
-  name: 'Sticker Sheet (Responsive)',
-  render: () => (
-    <>
-      <Text variant="intro-lede" classNameOverride="mb-12 ">
-        CalendarSingle scaled to availableHeight
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarSingle selected={new Date('2022-02-19')} />
-        </CalendarPopoverExample>
-      </div>
-      <Text variant="intro-lede" classNameOverride="mb-12 ">
-        CalendarRange scaled to availableHeight
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarRange
-            selected={{
-              from: new Date('2022-02-19'),
-              to: new Date('2022-03-04'),
-            }}
-            hasDivider
-          />
-        </CalendarPopoverExample>
-      </div>
-      <Text variant="intro-lede" classNameOverride="mb-12 mt-24">
-        CalendarSingle scaled to availableWidth
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative w-[250px]">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarSingle selected={new Date('2022-03-19')} />
-        </CalendarPopoverExample>
-      </div>
-      <Text variant="intro-lede" classNameOverride="mb-12 mt-24">
-        CalendarRanger scaled to availableWidth
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative w-[250px]">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarRange
-            data-testid="sb-final-calendar"
-            selected={{
-              from: new Date('2022-02-19'),
-              to: new Date('2022-03-04'),
-            }}
-            hasDivider
-          />
-        </CalendarPopoverExample>
-      </div>
-    </>
-  ),
-}

package/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx

@@ -5,7 +5,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { CalendarRange, type CalendarRangeProps } from '../../index'
 
 export default {
-  title: 'Components/Date controls/Calendars/CalendarRange',
+  title: 'Components/Datepickers/Calendars (primitives)/CalendarRange (primitive)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Calendar/CalendarRange/_docs/CalendarRange.stories.tsx

@@ -6,7 +6,7 @@ import { type DateRange } from '../../types'
 import { CalendarRange } from '../index'
 
 const meta = {
-  title: 'Components/Date controls/Calendars/CalendarRange',
+  title: 'Components/Datepickers/Calendars (primitives)/CalendarRange (primitive)',
   component: CalendarRange,
   argTypes: {
     ...defaultMonthControls,

package/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx

@@ -6,7 +6,7 @@ import styles from '../../baseCalendarClassNames.module.scss'
 import { CalendarSingle, type CalendarSingleProps } from '../index'
 
 export default {
-  title: 'Components/Date controls/Calendars/CalendarSingle',
+  title: 'Components/Datepickers/Calendars (primitives)/CalendarSingle (primitive)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Calendar/CalendarSingle/_docs/CalendarSingle.stories.tsx

@@ -5,7 +5,7 @@ import { weekStartsOnControls } from '../../_docs/controls/weekStartsOnControls'
 import { CalendarSingle } from '../index'
 
 const meta = {
-  title: 'Components/Date controls/Calendars/CalendarSingle',
+  title: 'Components/Datepickers/Calendars (primitives)/CalendarSingle (primitive)',
   component: CalendarSingle,
   argTypes: {
     ...defaultMonthControls,

package/src/DatePicker/_docs/DatePicker.stickersheet.stories.tsx

@@ -7,7 +7,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { DatePicker } from '../index'
 
 export default {
-  title: 'Components/Date controls/DatePicker',
+  title: 'Components/Datepickers/DatePicker',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/DatePicker/_docs/DatePicker.stories.tsx

@@ -13,7 +13,7 @@ import { datePickerLocaleControls } from './controls/datePickerLocaleControls'
 import { disabledDayMatchersControls } from './controls/disabledDayMatchersControls'
 
 const meta = {
-  title: 'Components/Date controls/DatePicker',
+  title: 'Components/Datepickers/DatePicker',
   component: DatePicker,
   argTypes: {
     ...datePickerLocaleControls,

package/src/DatePicker/_docs/getLocale.stickersheet.stories.tsx

@@ -6,7 +6,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { getLocale } from '../utils/getLocale'
 
 export default {
-  title: 'Components/Date controls/DatePicker/Tests',
+  title: 'Components/Datepickers/DatePicker/Tests',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/DateRangePicker/_docs/DateRangePicker.stickersheet.stories.tsx

@@ -10,7 +10,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { DateRangePicker, formatDateRangeValue, type DateRangePickerProps } from '../index'
 
 export default {
-  title: 'Components/Date controls/DateRangePicker',
+  title: 'Components/Datepickers/DateRangePicker',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/DateRangePicker/_docs/DateRangePicker.stories.tsx

@@ -5,7 +5,7 @@ import { type DateRange } from 'react-day-picker'
 import { DateRangePicker, formatDateRangeValue } from '../index'
 
 const meta = {
-  title: 'Components/Date controls/DateRangePicker',
+  title: 'Components/Datepickers/DateRangePicker',
   component: DateRangePicker,
   args: {
     labelText: 'Label',

package/src/{__next__/Tooltip/subcomponents/Focusable → Focusable}/_docs/ApiSpecification.mdx

@@ -2,18 +2,18 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'
 import { KAIOInstallation, ResourceLinks } from '~storybook/components'
 import * as exampleStories from './Focusable.stories'
 
-<Meta title="Components/Tooltip/Tooltip (next)/Focusable/API Specification" />
+<Meta title="Components/Focusable/API Specification" />
 
 # Focusable API Specification
 
 Updated June 25, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tooltip/subcomponents/Focusable"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Focusable"
   className="mt-16 !mb-8"
 />
 
-<KAIOInstallation exportNames={['Focusable']} isNext />
+<KAIOInstallation exportNames={['Focusable']} />
 
 ## Overview
 

package/src/{__next__/Tooltip/subcomponents/Focusable → Focusable}/_docs/Focusable.stories.tsx

@@ -4,7 +4,7 @@ import { Tag } from '~components/__next__/Tag'
 import { Focusable } from '../index'
 
 const meta = {
-  title: 'Components/Tooltip/Tooltip (next)/Focusable',
+  title: 'Components/Focusable',
   component: Focusable,
   parameters: {
     layout: 'centered',

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

@@ -7,7 +7,7 @@ import { AddIcon } from '../index'
 import styles from './icon.module.scss'
 
 const meta = {
-  title: 'Components/Icon/*Icon Components (deprecated)',
+  title: 'Components/Icon/Icon components (deprecated)',
   component: AddIcon,
   args: {
     role: 'presentation',

package/src/Icon/_docs/Icon.mdx

@@ -6,7 +6,7 @@ import * as IconStories from './Icon.docs.stories'
 
 # Icon (deprecated)
 
-<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icons" />
+<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icon" />
 
 <ReplacementNotice />
 

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

@@ -4,7 +4,7 @@ import * as ICONS from '~components/Icon'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 
 export default {
-  title: 'Components/Icon/*Icon Components (deprecated)',
+  title: 'Components/Icon/Icon components (deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Link/Link.module.css

@@ -0,0 +1,119 @@
+.link {
+  color: var(--link-text-color, var(--color-blue-500));
+  font-family: var(--typography-paragraph-body-font-family);
+  font-size: var(--link-font-size, inherit);
+  line-height: var(--link-line-height, inherit);
+  font-weight: var(--typography-paragraph-body-font-weight);
+  text-decoration: none;
+  position: relative;
+  white-space: nowrap;
+  outline: 0;
+}
+
+.link[data-focus-visible]::after {
+  content: '';
+  position: absolute;
+  background: transparent;
+  border-color: var(--color-blue-500);
+  border-radius: 0;
+  border-width: var(--border-focus-ring-border-width);
+  border-style: var(--border-focus-ring-border-style);
+  inset: calc(-1 * (var(--border-focus-ring-border-width) * 2) - 1px);
+}
+
+.isUnderlined {
+  border-bottom: var(--spacing-1) solid var(--link-text-color, var(--color-blue-500));
+}
+
+.icon > * {
+  vertical-align: text-bottom;
+  font-size: var(--icon-font-size, 1em);
+}
+
+.iconStart {
+  margin-inline-start: var(--text-icon-gap, 0.5em);
+}
+
+.iconEnd {
+  margin-inline-end: var(--text-icon-gap, 0.5em);
+}
+
+.primary[data-hovered] {
+  --link-text-color: var(--color-blue-600);
+}
+
+.primary[data-pressed] {
+  --link-text-color: var(--color-blue-700);
+}
+
+.secondary {
+  --link-text-color: var(--color-purple-800);
+}
+
+.secondary[data-hovered] {
+  --link-text-color: var(--color-gray-600);
+}
+
+.secondary[data-pressed] {
+  --link-text-color: var(--color-black);
+}
+
+[class*='extra-small'] .link.isInline,
+.extra-small {
+  --link-font-size: var(--typography-paragraph-extra-small-font-size);
+  --link-line-height: var(--typography-paragraph-extra-small-line-height);
+  --icon-font-size: 0.875rem;
+  --text-icon-gap: var(--spacing-2);
+}
+
+[class*='body'] .link.isInline,
+.body {
+  --link-font-size: var(--typography-paragraph-body-font-size);
+  --link-line-height: var(--typography-paragraph-body-line-height);
+  --icon-font-size: 1.25rem;
+  --text-icon-gap: var(--spacing-6);
+}
+
+[class*='intro-lede'] .link.isInline,
+.intro-lede {
+  --link-font-size: var(--typography-paragraph-intro-lede-font-size);
+  --link-line-height: var(--typography-paragraph-intro-lede-line-height);
+  --icon-font-size: 1.5rem;
+  --text-icon-gap: var(--spacing-8);
+}
+
+[class*='small']:not([class*='extra-small']) .link.isInline,
+.small {
+  --link-font-size: var(--typography-paragraph-small-font-size);
+  --link-line-height: var(--typography-paragraph-small-line-height);
+  --icon-font-size: 1rem;
+  --text-icon-gap: var(--spacing-4);
+}
+
+.white {
+  --link-text-color: var(--color-white);
+}
+
+.white[data-focus-visible]::after {
+  border-color: var(--color-blue-300);
+}
+
+.white.isDisabled {
+  --link-text-color: rgba(var(--color-white-rgb), 0.2);
+}
+
+.reversed {
+  --link-text-color: var(--color-white);
+}
+
+.reversed[data-focus-visible]::after {
+  border-color: var(--color-blue-300);
+}
+
+.link.isDisabled {
+  --link-text-color: var(--color-gray-400);
+}
+
+.reversed.isDisabled {
+  --link-text-color: rgba(var(--color-white-rgb), 0.2);
+}

package/src/Link/Link.tsx

@@ -0,0 +1,90 @@
+import React, { forwardRef } from 'react'
+import { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components'
+import { type TextProps } from '~components/Text'
+import { mergeClassNames } from '~components/utils/mergeClassNames'
+import { LinkContent } from './subcomponents/LinkContent'
+import styles from './Link.module.css'
+
+export type LinkProps = BaseLinkProps &
+  ((UnderlinedLink | NonUnderlinedLink) & (InlineLink | NonInlineLink))
+
+type BaseLinkProps = {
+  /** Controls the visual style of a link. @default 'primary' */
+  variant?: 'primary' | 'secondary' | 'white'
+  /** Controls the position of a link. @default 'end' */
+  iconPosition?: 'start' | 'end'
+} & Omit<RACLinkProps, 'children'> & {
+    /** Used as the label for the Link. */
+    children: RACLinkProps['children']
+  }
+
+type UnderlinedLink = {
+  /** Toggles the underline of the icon and children @default true */
+  isUnderlined?: true
+  /** The icon to be displayed, optional when link is underlined */
+  icon?: JSX.Element
+}
+
+type NonUnderlinedLink = {
+  /** Toggles the underline of the icon and children */
+  isUnderlined?: false
+  /** The icon to be displayed, required when link is not underlined */
+  icon: JSX.Element
+}
+
+type InlineLink = {
+  /** isInline assumes the Link is wrapped in a [Text](https://cultureamp.design/?path=/docs/components-text--docs) component */
+  isInline: true
+  /** The size of the link, not passed when isInline */
+  size?: never
+}
+
+type NonInlineLink = {
+  /** isInline assumes the Link is wrapped in a [Text](https://cultureamp.design/?path=/docs/components-text--docs) component @default false */
+  isInline?: false
+  /** The size of the link. Sizes correlate to body text sizes. @default 'body' */
+  size?: TextProps['variant']
+}
+
+export const Link = forwardRef(
+  (
+    {
+      children,
+      variant = 'primary',
+      size = 'body',
+      icon,
+      iconPosition = 'end',
+      isInline = false,
+      isDisabled,
+      className,
+      isUnderlined = true,
+      ...otherProps
+    }: LinkProps,
+    ref: React.ForwardedRef<HTMLAnchorElement>,
+  ) => {
+    const childIsFunction = typeof children === 'function'
+
+    return (
+      <RACLink
+        ref={ref}
+        className={mergeClassNames(
+          styles.link,
+          isDisabled && styles.isDisabled,
+          isInline ? styles.isInline : styles[size],
+          styles[variant],
+          className,
+        )}
+        isDisabled={isDisabled}
+        {...otherProps}
+      >
+        {(racStateProps) => (
+          <LinkContent icon={icon} iconPosition={iconPosition} isUnderlined={isUnderlined}>
+            {childIsFunction ? children(racStateProps) : children}
+          </LinkContent>
+        )}
+      </RACLink>
+    )
+  },
+)
+
+Link.displayName = 'Link'