@kaizen/components 1.79.6 → 1.79.7

package/src/__alpha__/SingleSelect/_docs/mockData.ts

@@ -0,0 +1,92 @@
+export const singleMockItems = [
+  { label: 'Short black', value: 'short-black' },
+  { label: 'Long black', value: 'long-black' },
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Flat white', value: 'flat-white' },
+  { label: 'Mocha', value: 'mocha' },
+  { label: 'Cappuccino', value: 'cappuccino' },
+  { label: 'Magic', value: 'magic' },
+]
+
+export const groupedMockItems = [
+  {
+    label: 'Colours',
+    options: [
+      { label: 'Blue', value: 'blue' },
+      { label: 'Red', value: 'red' },
+      { label: 'Green', value: 'green' },
+    ],
+  },
+  {
+    label: 'Flavours',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Chocolate', value: 'chocolate' },
+      { label: 'Strawberry', value: 'strawberry' },
+    ],
+  },
+]
+
+export const mixedMockItemsDisabled = [
+  { label: 'Short black', value: 'short-black', disabled: true },
+  { label: 'Long black', value: 'long-black' },
+  { label: 'Batch brew', value: 'batch-brew', disabled: true },
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large', disabled: true },
+    ],
+  },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla', disabled: true },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]
+
+export const mixedMockItemsUngroupedFirst = [
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Magic', value: 'magic' },
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large' },
+    ],
+  },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]
+
+export const mixedMockItemsUnordered = [
+  {
+    label: 'Size',
+    options: [
+      { label: 'Regular', value: 'regular' },
+      { label: 'Large', value: 'large' },
+    ],
+  },
+  { label: 'Batch brew', value: 'batch-brew' },
+  { label: 'Latte', value: 'latte' },
+  { label: 'Magic', value: 'magic' },
+  {
+    label: 'Syrup',
+    options: [
+      { label: 'Vanilla', value: 'vanilla' },
+      { label: 'Caramel', value: 'caramel' },
+      { label: 'Hazelnut', value: 'hazelnut' },
+    ],
+  },
+]

package/src/__alpha__/SingleSelect/index.ts

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

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

@@ -0,0 +1,7 @@
+@layer kz-components {
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/List/List.tsx

@@ -0,0 +1,17 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import { ListBox as RACListBox, type ListBoxProps } from 'react-aria-components'
+import styles from './List.module.css'
+
+export const List = ({
+  children,
+  className,
+  ...props
+}: ListBoxProps<object> & PropsWithChildren): React.ReactElement => {
+  return (
+    <RACListBox className={classNames(styles.list, className)} {...props}>
+      {children}
+    </RACListBox>
+  )
+}
+List.displayName = 'SingleSelect.List'

package/src/__alpha__/SingleSelect/subcomponents/List/index.ts

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

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

@@ -0,0 +1,9 @@
+@layer kz-components {
+  .listItem {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.tsx

@@ -0,0 +1,17 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import { ListBoxItem as RACListBoxItem, type ListBoxItemProps } from 'react-aria-components'
+import styles from './ListItem.module.css'
+
+export const ListItem = ({
+  children,
+  className,
+  ...props
+}: ListBoxItemProps<object> & PropsWithChildren): React.ReactElement => {
+  return (
+    <RACListBoxItem className={classNames(styles.listItem, className)} {...props}>
+      {children}
+    </RACListBoxItem>
+  )
+}
+ListItem.displayName = 'SingleSelect.ListItem'

package/src/__alpha__/SingleSelect/subcomponents/ListItem/index.ts

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

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

@@ -0,0 +1,9 @@
+@layer kz-components {
+  .listSectionHeader {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.tsx

@@ -0,0 +1,23 @@
+import React, { type PropsWithChildren } from 'react'
+import classNames from 'classnames'
+import {
+  Header as RACHeader,
+  ListBoxSection as RACListBoxSection,
+  type ListBoxSectionProps,
+} from 'react-aria-components'
+import styles from './ListSection.module.css'
+
+export const ListSection = ({
+  name,
+  className,
+  children,
+  ...props
+}: ListBoxSectionProps<object> & PropsWithChildren & { name: string }): React.ReactElement => {
+  return (
+    <RACListBoxSection {...props}>
+      <RACHeader className={classNames(styles.listSectionHeader, className)}>{name}</RACHeader>
+      {children}
+    </RACListBoxSection>
+  )
+}
+ListSection.displayName = 'SingleSelect.ListSection'

package/src/__alpha__/SingleSelect/subcomponents/ListSection/index.ts

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

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

@@ -0,0 +1,18 @@
+@layer kz-components {
+  .button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    padding: var(--spacing-12);
+    min-height: var(--spacing-48);
+    min-width: var(--spacing-200);
+    background-color: var(--color-white);
+    border-radius: var(--spacing-8);
+    border: 1px solid var(--color-gray-500);
+  }
+}

package/src/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Button as RACButton, SelectValue } from 'react-aria-components'
+import { Icon } from '~components/__next__/Icon'
+import styles from './Trigger.module.css'
+
+export const Trigger = (): JSX.Element => {
+  return (
+    <RACButton className={styles.button}>
+      <SelectValue />
+      <Icon name="keyboard_arrow_down" isPresentational />
+    </RACButton>
+  )
+}

package/src/__alpha__/SingleSelect/subcomponents/Trigger/index.ts

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

package/src/__alpha__/SingleSelect/subcomponents/index.ts

@@ -0,0 +1,4 @@
+export * from './List'
+export * from './ListSection'
+export * from './ListItem'
+export * from './Trigger'

package/src/__alpha__/index.ts

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