@northlight/ui 2.41.0 → 2.41.1

package/lib/theme/components/number-input/index.ts

@@ -0,0 +1,118 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const NumberInput: ComponentMultiStyleConfig = {
+  parts: [ 'root', 'field', 'stepper', 'stepperGroup' ],
+  sizes: {
+    sm: ({ theme: { radii: borderRadius, sizes: sizing } }) => ({
+      field: {
+        borderRadius: borderRadius.input.outline,
+      },
+      stepperGroup: {
+        height: sizing['8'],
+      },
+    }),
+    md: ({ theme: { sizes: sizing } }) => ({
+      stepperGroup: {
+        height: sizing['10'],
+      },
+    }),
+    lg: ({ theme: { sizes: sizing } }) => ({
+      stepperGroup: {
+        height: sizing['12'],
+      },
+    }),
+  },
+  baseStyle: ({ theme: {
+    sizes: sizing,
+    space: spacing,
+    colors: color,
+    radii: borderRadius,
+    borders: borderWidth,
+    opacity,
+  }, isReadOnly, minWidth, minW }) => ({
+    root: {
+      borderRadius: borderRadius.input.outline,
+    },
+    field: {
+      minWidth: minWidth ?? minW ?? sizing['44'],
+      paddingInlineStart: spacing['padding-inline'].input.default,
+      paddingInlineEnd: spacing['padding-inline'].input.default,
+      WebkitPaddingStart: spacing['padding-inline'].input.default,
+      WebkitPaddingEnd: spacing['padding-inline'].input.default,
+      color: color.text.default,
+      bg: color.background.input['outline-default'],
+
+      borderWidth: borderWidth.input.default,
+      borderColor: color.border.input.default,
+      paddingRight: spacing.paddingRight['number-input'].field,
+      _hover: {
+        bg: color.background.input['outline-hover'],
+        borderColor: color.border.input['default-hover'],
+      },
+      _focusVisible: {
+        bg: color.background.input['outline-focus'],
+        borderColor: color.border.input.focus,
+        boxShadow: `inset 0 0 0 1px ${color.border.textarea.focus}`,
+      },
+      _invalid: {
+        bg: color.background.input['outline-error'],
+        borderColor: color.border.input.error,
+        boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
+      },
+      _disabled: {
+        bg: color.background.input['outline-disabled'],
+        opacity: opacity.input.disabled,
+        borderColor: color.border.input.disabled,
+      },
+      _readOnly: {
+        _focusVisible: {
+          borderColor: color.border.input.readonly,
+          boxShadow: 'none',
+        },
+        _hover: {
+          borderColor: color.border.input.readonly,
+        },
+      },
+    },
+    stepperGroup: {
+      width: 'auto',
+      paddingRight: spacing.paddingRight['number-input'].stepper,
+    },
+    stepper: {
+      _first: {
+        border: 'none',
+        borderTopRightRadius: borderRadius['input-stepper'].default,
+        borderRadius: borderRadius['input-stepper'].default,
+        bg: color.background['input-stepper'].default,
+        opacity: isReadOnly ? opacity.input.disabled : 'auto',
+        _hover: {
+          bg: isReadOnly ? 'none' : color.background['input-stepper'].hover,
+        },
+        _active: {
+          bg: color.background['input-stepper'].active,
+        },
+        _disabled: {
+          bg: color.background['input-stepper'].disabled,
+          color: color.icon['input-stepper'].disabled,
+        },
+      },
+      _last: {
+        border: 'none',
+        bg: color.background['input-stepper'].default,
+        borderBottomRightRadius: borderRadius['input-stepper'].default,
+        borderRadius: borderRadius['input-stepper'].default,
+        opacity: isReadOnly ? opacity.input.disabled : 'auto',
+        _hover: {
+          bg: isReadOnly ? 'none' : color.background['input-stepper'].hover,
+        },
+        _active: {
+          bg: color.background['input-stepper'].active,
+        },
+        _disabled: {
+          bg: color.background['input-stepper'].disabled,
+          color: color.icon['input-stepper'].disabled,
+        },
+      },
+    },
+  }),
+}

package/lib/theme/components/pin-input/index.ts

@@ -0,0 +1,52 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+
+export const PinInput: ComponentSingleStyleConfig = {
+  variants: {
+    outline: ({ theme: {
+      radii: borderRadius,
+      borders: borderWidth,
+      colors: color,
+      space: spacing,
+      opacity,
+    } }) => ({
+      borderColor: color.border.input.default,
+      borderRadius: borderRadius.input.outline,
+      borderWidth: borderWidth.input.default,
+      bg: color.background.input['outline-default'],
+      color: color.text.default,
+      paddingInline: spacing['padding-inline'].input.default,
+      _hover: {
+        bg: color.background.input['outline-hover'],
+        borderColor: color.border.input['default-hover'],
+      },
+      _focus: {
+        borderColor: color.border.input.focus,
+        bg: color.background.input['outline-focus'],
+        boxShadow: 'none',
+        borderWidth: borderWidth.sm,
+      },
+      _invalid: {
+        bg: color.background.input['outline-error'],
+        borderColor: color.border.input.error,
+        _placeholder: {
+          color: 'transparent',
+        },
+      },
+      _disabled: {
+        bg: color.background.input['outline-disabled'],
+        borderColor: color.border.input.disabled,
+        opacity: opacity.input.disabled,
+        _hover: {
+          bg: color.background.input['outline-disabled'],
+          borderColor: color.border.input.disabled,
+        },
+      },
+      _placeholder: {
+        color: color.text.input.placeholder,
+      },
+      _readonly: {
+        borderColor: color.border.input.readonly,
+      },
+    }),
+  },
+}

package/lib/theme/components/popover/index.ts

@@ -0,0 +1,10 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Popover: ComponentMultiStyleConfig = {
+  parts: [ 'popper' ],
+  baseStyle: {
+    popper: {
+      zIndex: 'popover',
+    },
+  },
+}

package/lib/theme/components/progress-bar/index.ts

@@ -0,0 +1,12 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+
+export const Progress: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme: { colors: color } }) => ({
+    track: {
+      bg: color['subdued-alt'],
+    },
+    filledTrack: {
+      bg: color.brand,
+    },
+  }),
+}

package/lib/theme/components/radio/index.ts

@@ -0,0 +1,73 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Radio: ComponentMultiStyleConfig = {
+  parts: [ 'control', 'label', 'container' ],
+  sizes: {
+    sm: ({ theme: { borders: borderWidth } }) => ({
+      control: {
+        _checked: {
+          borderWidth: borderWidth.radio['checked-sm'],
+        },
+      },
+    }),
+    md: ({ theme: { borders: borderWidth } }) => ({
+      control: {
+        _checked: {
+          borderWidth: borderWidth.radio['checked-md'],
+        },
+      },
+    }),
+    lg: ({ theme: { borders: borderWidth } }) => ({
+      control: {
+        _checked: {
+          borderWidth: borderWidth.radio['checked-lg'],
+        },
+      },
+    }),
+  },
+  baseStyle: ({ theme: { borders: borderWidth, colors: color } }) => ({
+    control: {
+      borderColor: color.border.radio.default,
+      bg: color.background.radio.default,
+      borderWidth: borderWidth.radio.default,
+      _checked: {
+        borderColor: color.border.radio.checked,
+        bg: color.background.radio.checked,
+        _hover: {
+          borderColor: color.border.radio.checked,
+          bg: color.background.radio.checked,
+        },
+      },
+      _hover: {
+        borderColor: color.border.radio['default-hover'],
+        bg: color.background.radio.default,
+      },
+      _disabled: {
+        borderColor: color.border.radio.disabled,
+        bg: color.background.radio.disabled,
+        _hover: {
+          borderColor: color.border.radio.disabled,
+          bg: color.background.radio.disabled,
+        },
+      },
+      _invalid: {
+        borderColor: color.border.radio.error,
+        bg: color.background.radio.error,
+        borderWidth: borderWidth.radio.default,
+        _hover: {
+          borderColor: color.border.radio.error,
+          bg: color.background.radio.error,
+          borderWidth: borderWidth.radio.default,
+        },
+      },
+      _focusVisible: {
+        ring: '2px',
+        ringColor: color.border.wcag,
+        ringOffset: '1px',
+      },
+    },
+    defaultProps: {
+      size: 'md',
+    },
+  }),
+}

package/lib/theme/components/select/custom-select.ts

@@ -0,0 +1,44 @@
+import { ChakraStylesConfig } from 'chakra-react-select'
+import { getContrastColor } from '../../../utils'
+
+export const customSelectStyles: ChakraStylesConfig<any> = {
+  container: (provided) => ({
+    ...provided,
+    width: '100%',
+    color: 'text.default',
+  }),
+  option: (provided, state) => ({
+    ...provided,
+    background: state.isFocused && 'background.select.option-focus',
+    overflowWrap: 'anywhere',
+    _active: {
+      background: 'background.select.option-active',
+    },
+  }),
+  valueContainer: (provided) => ({
+    ...provided,
+    paddingInlineStart: 'padding-inline.select.default',
+  }),
+  downChevron: (provided) => ({
+    ...provided,
+    color: 'icon.select.default',
+  }),
+  placeholder: (provided) => ({
+    ...provided,
+    color: 'text.select.placeholder',
+  }),
+  multiValue: (provided, state) => {
+    const background = state.data.isFixed
+      ? 'background.select.option-disabled'
+      : state.data.color ?? provided.bgColor
+    return ({
+      ...provided,
+      bgColor: background,
+      color: getContrastColor(background),
+    })
+  },
+  menuList: (provided) => ({
+    ...provided,
+    bgColor: 'background.default',
+  }),
+}

package/lib/theme/components/select/index.ts

@@ -0,0 +1,65 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Select: ComponentMultiStyleConfig = {
+  parts: [ 'field', 'icon' ],
+  baseStyle: ({ theme: {
+    radii: borderRadius,
+    borders: borderWidth,
+    colors: color,
+    space: spacing,
+  } }) => ({
+    field: {
+      paddingInlineStart: spacing['padding-inline'].select.default,
+      paddingInlineEnd: spacing['padding-inline'].select.default,
+      borderWidth: borderWidth.select,
+      color: color.text.default,
+      borderColor: color.border.select.default,
+      borderRadius: borderRadius.select.default,
+      _hover: {
+        borderColor: color.border.select['default-hover'],
+      },
+      _focusVisible: {
+        borderColor: color.border.select.focus,
+        boxShadow: `0 0 0 1px ${color.border.select.focus}`,
+      },
+      _invalid: {
+        borderColor: color.border.select.error,
+        boxShadow: 'none',
+      },
+      _readOnly: {
+        borderWidth: borderWidth.select,
+        borderColor: color.border.select.readonly,
+        _focusVisible: {
+          borderColor: color.border.select.readonly,
+        },
+      },
+      _disabled: {
+        borderColor: color.border.select.disabled,
+        bg: color.background.select.disabled,
+        _hover: {
+          borderColor: color.border.select.disabled,
+        },
+      },
+      _placeholder: {
+        color: color.text.select.placeholder,
+      },
+    },
+    icon: {
+      color: color.icon.select.default,
+    },
+  }),
+  variants: {
+    outline: {},
+    ai: ({ theme: { colors: color } }) => ({
+      field: {
+        _focusVisible: {
+          borderColor: color.border.ai,
+          boxShadow: `0 0 0 1px ${color.border.ai}`,
+        },
+
+      },
+
+    }),
+
+  },
+}

package/lib/theme/components/spinner/index.ts

@@ -0,0 +1,12 @@
+import {
+  ComponentSingleStyleConfig,
+} from '@chakra-ui/react'
+
+export const Spinner: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme: { colors: color, borders: borderWidth } }) => ({
+    borderWidth: borderWidth.spinner.default,
+    color: color.background.spinner.thumb,
+    borderBottomColor: color.background.spinner.track,
+    borderLeftColor: color.background.spinner.track,
+  }),
+}

package/lib/theme/components/split-pane/index.ts

@@ -0,0 +1,33 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+
+export const SplitPane: ComponentSingleStyleConfig = {
+  baseStyle: ({ minLeftWidth, minRightWidth, initialSplit, isOpen }) => ({
+    display: 'grid',
+    overflow: 'hidden',
+    gridTemplateColumns: !isOpen ? '1fr' : `minmax(${minLeftWidth}%, var(--split-pos, ${initialSplit}%)) auto minmax(${minRightWidth}%, 1fr)`,
+    alignItems: 'stretch',
+    justifyItems: 'stretch',
+    height: '100%',
+    width: '100%',
+  }),
+}
+
+export const PaneDivider: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme: { colors: color, sizes: sizing } }) => ({
+    bgColor: color.background['pane-divider'].default,
+    zIndex: 300,
+    cursor: 'col-resize',
+    height: '100%',
+    width: sizing[1],
+    _hover: {
+      outlineColor: color.border['pane-divider'].hover,
+      outlineWidth: sizing['0a'],
+      outlineStyle: 'solid',
+    },
+    _active: {
+      outlineColor: color.border['pane-divider'].hover,
+      outlineWidth: sizing['0a'],
+      outlineStyle: 'solid',
+    },
+  }),
+}

package/lib/theme/components/steps/index.ts

@@ -0,0 +1,2 @@
+export * from './step'
+export * from './step-list'

package/lib/theme/components/steps/step/index.ts

@@ -0,0 +1,63 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Step: ComponentMultiStyleConfig = {
+  parts: [ 'step', 'label', 'description', 'indicator' ],
+  baseStyle: ({ theme: { colors: color, fontWeights, space: spacing, borders: borderWidth } }) => ({
+    step: {
+      justifyContent: 'start',
+      alignItems: 'start',
+      bgColor: color.background.step.default,
+      borderTopWidth: borderWidth.step.default,
+      borderColor: color.border.step.default,
+      borderBottom: 'none',
+      paddingInline: spacing['padding-inline'].step.default,
+      color: color.text.subdued,
+      _hover: {
+        bgColor: color.background.step.hover,
+        borderColor: color.border.step.hover,
+      },
+      _disabled: {
+        cursor: 'not-allowed',
+        _hover: { borderColor: color.border.step.default },
+      },
+      _active: {
+        bgColor: color.background.step.active,
+      },
+      _selected: {
+        bgColor: color.background.step.selected,
+        borderColor: color.border.step.selected,
+        color: color.border.step.selected,
+        '[data-part="indicator"]': {
+          bg: color.border.step.selected,
+        },
+        _hover: {
+          borderColor: color.border.step.selected,
+          color: color.border.step.selected,
+        },
+      },
+    },
+    label: {
+      color: 'inherit',
+      textAlign: 'start',
+      fontWeight: fontWeights.bold,
+    },
+    description: {
+      textAlign: 'start',
+      fontWeight: fontWeights.semiBold,
+      color: color.text.default,
+    },
+    indicator: {
+      minW: 6,
+      minH: 6,
+      borderRadius: 'full',
+      bg: color.text.subdued,
+      color: 'mono.white',
+      fontWeight: fontWeights.bold,
+      fontSize: 'xs',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginTop: '2xs',
+    },
+  }),
+}

package/lib/theme/components/steps/step-list/index.ts

@@ -0,0 +1,13 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+
+export const StepList: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme: { sizes: sizing }, tabs }) => ({
+    display: 'grid',
+    width: '100%',
+    gridTemplateColumns: `repeat(${tabs}, minmax(${sizing[32]}, 1fr))`,
+    gridTemplateRows: '1fr',
+    overflowX: 'auto',
+    borderBottom: 'none',
+    paddingBottom: sizing[2],
+  }),
+}

package/lib/theme/components/switch/index.ts

@@ -0,0 +1,23 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+
+export const Switch: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme: { colors: color, opacity } }) => ({
+    _disabled: {
+      opacity: opacity.switch.disabled,
+    },
+    track: {
+      bgColor: color.background.switch.default,
+      _checked: {
+        bgColor: color.background.switch['default-checked'],
+      },
+      _focusVisible: {
+        ring: '2px',
+        ringColor: color.border.wcag,
+        ringOffset: '1px',
+      },
+    },
+    thumb: {
+      bgColor: color.background.switch.thumb,
+    },
+  }),
+}

package/lib/theme/components/table/index.ts

@@ -0,0 +1,81 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+import { mode } from '@chakra-ui/theme-tools'
+
+export const Table: ComponentMultiStyleConfig = {
+  parts: [
+    'table',
+    'th',
+    'td',
+    'columnHeader',
+    'cell',
+    'caption',
+    'footer',
+    'tr',
+  ],
+  variants: {
+    rounded: () => ({
+      table: {
+        borderSpacing: '0',
+        borderCollapse: 'separate',
+        borderRadius: 'md',
+        borderColor: 'border.default',
+        borderWidth: 'xs',
+        px: '3',
+      },
+
+      th: {
+        color: 'text.subdued',
+        fontWeight: 'bold',
+        textTransform: 'none',
+        fontSize: 'sm',
+      },
+
+      td: {
+        borderColor: 'border.default',
+        borderTopWidth: 'xs',
+      },
+    }),
+    striped: (props) => {
+      const { colorScheme: c = 'gray' } = props
+
+      return {
+        table: {
+          borderSpacing: '0',
+          borderCollapse: 'separate',
+          borderRadius: 'md',
+          borderColor: 'border.default',
+          borderWidth: 'xs',
+          p: '2',
+        },
+        columnHeader: {
+          color: 'text.subdued',
+          bgColor: mode(`${c}.100`, `${c}.700`)(props),
+          fontWeight: 'bold',
+          textTransform: 'none',
+          fontSize: 'sm',
+        },
+        cell: {
+          bgColor: mode(`${c}.100`, `${c}.700`)(props),
+        },
+        caption: {
+          color: mode('gray.600', 'gray.100')(props),
+        },
+        th: {
+          borderBottomWidth: '0',
+        },
+        tr: {
+          '&:nth-of-type(odd)': {
+            td: {
+              background: mode(`${c}.100`, `${c}.700`)(props),
+            },
+          },
+        },
+        footer: {
+          tr: {
+            th: { borderBottomWidth: 0 },
+          },
+        },
+      }
+    },
+  },
+}