@northlight/ui 2.41.0 → 2.41.1

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

@@ -0,0 +1,47 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+import { ring } from '../../../utils'
+
+export const Calendar: ComponentMultiStyleConfig = {
+  parts: [ 'container', 'dateSelect', 'dayLabel', 'rangeCalendarContainer' ],
+  baseStyle: ({ theme: {
+    space: spacing,
+    sizes: sizing,
+    colors: color,
+  } }) => ({
+    container: {
+      p: spacing[2],
+      w: sizing[64],
+      bgColor: 'background.default',
+      border: '1px solid',
+      borderColor: 'border.input.default',
+      borderRadius: 'input.outline',
+    },
+    rangeCalendarContainer: {
+      p: '3',
+      w: '128',
+      bgColor: 'background.default',
+      borderRadius: 'input.outline',
+    },
+    dateSelect: {
+      fontWeight: 'semibold',
+      border: 'none',
+      padding: '1',
+      borderRadius: 'md',
+      color: color.text.default,
+      bgColor: color.background.button.ghost,
+      _hover: {
+        cursor: 'pointer',
+        bgColor: color.background.button['ghost-hover'],
+      },
+      _active: {
+        bgColor: color.background.button['ghost-active'],
+      },
+      ...ring,
+    },
+    dayLabel: {
+      color: color.gray[600],
+      fontSize: 'xs',
+      p: spacing[2],
+    },
+  }),
+}

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

@@ -0,0 +1,30 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Carousel: ComponentMultiStyleConfig = {
+  parts: [ 'container', 'arrow', 'radio' ],
+  baseStyle: {
+    container: {
+      display: 'grid',
+      placeItems: 'center',
+      position: 'relative',
+      overflow: 'hidden',
+      width: 'full',
+      height: 'full',
+    },
+    radio: {
+      position: 'absolute',
+      bottom: '1',
+      left: '50%',
+      transform: 'translateX(-50%)',
+      overflowX: 'scroll',
+      maxWidth: '90%',
+      padding: '2',
+    },
+    arrow: {
+      position: 'absolute',
+      bottom: '0',
+      height: '100%',
+      cursor: 'pointer',
+    },
+  },
+}

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

@@ -0,0 +1,90 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const Checkbox: ComponentMultiStyleConfig = {
+  parts: [ 'control', 'label' ],
+  sizes: {
+    sm: {
+      control: {
+        fontSize: 5,
+      },
+    },
+    md: {
+      control: {
+        fontSize: 7,
+      },
+    },
+    lg: {
+      control: {
+        fontSize: 8,
+      },
+    },
+  },
+  baseStyle: ({ theme: { colors: color, opacity } }) => ({
+    control: {
+      borderColor: color.border.checkbox.default,
+      bg: color.background.checkbox.default,
+      borderWidth: 2,
+      _checked: {
+        borderColor: color.border.checkbox.checked,
+        bg: color.background.checkbox.checked,
+        _hover: {
+          borderColor: color.border.checkbox.checked,
+          bg: color.background.checkbox.checked,
+        },
+      },
+      _invalid: {
+        borderColor: color.border.checkbox.error,
+        bg: color.background.checkbox.default,
+        _checked: {
+          bg: color.background.checkbox.error,
+        },
+        _hover: {
+          borderColor: color.border.checkbox.error,
+          bg: color.background.checkbox.default,
+        },
+      },
+      _focusVisible: {
+        ring: '2px',
+        ringColor: color.border.wcag,
+        ringOffset: '1px',
+      },
+      _hover: {
+        borderColor: color.border.checkbox['default-hover'],
+        bg: color.background.checkbox.default,
+      },
+      _disabled: {
+        borderColor: color.border.checkbox.disabled,
+        bg: color.background.checkbox.disabled,
+        opacity: opacity.checkbox.disabled,
+        _checked: {
+          borderColor: color.border.checkbox.checked,
+          bg: color.background.checkbox.checked,
+          opacity: opacity.checkbox.disabled,
+          color: 'white',
+          _hover: {
+            borderColor: color.border.checkbox.checked,
+            bg: color.background.checkbox.checked,
+            opacity: opacity.checkbox.disabled,
+          },
+        },
+        _hover: {
+          borderColor: color.border.checkbox.disabled,
+          bg: color.background.checkbox.disabled,
+          opacity: opacity.checkbox.disabled,
+        },
+      },
+    },
+  }),
+  variants: {
+    default: ({ theme: { radii: borderRadius } }) => ({
+      control: {
+        borderRadius: borderRadius.checkbox.default,
+      },
+    }),
+    rounded: ({ theme: { radii: borderRadius } }) => ({
+      control: {
+        borderRadius: borderRadius.checkbox.full,
+      },
+    }),
+  },
+}

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

@@ -0,0 +1,38 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const ClipboardInput: ComponentMultiStyleConfig = {
+  parts: [ 'button', 'icon', 'tooltip' ],
+  sizes: {
+    sm: ({ theme: { sizes: sizing, space: spacing } }) => ({
+      button: {
+        height: sizing.button.xs,
+        minWidth: sizing.button.xs,
+      },
+      icon: {
+        boxSize: sizing.icon.xs,
+      },
+      tooltip: {
+        paddingInline: spacing['padding-inline'].tooltip.sm,
+        paddingY: spacing.paddingY.tooltip.sm,
+      },
+    }),
+    md: ({ theme: { sizes: sizing } }) => ({
+      button: {
+        height: sizing.button.sm,
+        minWidth: sizing.button.sm,
+      },
+      icon: {
+        boxSize: sizing.icon.sm,
+      },
+    }),
+    lg: ({ theme: { sizes: sizing } }) => ({
+      button: {
+        height: sizing.button.md,
+        minWidth: sizing.button.md,
+      },
+      icon: {
+        boxSize: sizing.icon.md,
+      },
+    }),
+  },
+}

package/lib/theme/components/close-button/index.ts

@@ -0,0 +1,25 @@
+import { ComponentSingleStyleConfig } from '@chakra-ui/react'
+
+export const CloseButton: ComponentSingleStyleConfig = {
+  baseStyle: ({ theme: { colors: color } }) => ({
+    color: color.text.default,
+    bgColor: color.background.button.ghost,
+    _hover: {
+      bg: color.background.button['ghost-hover'],
+      _disabled: {
+        bgColor: color.background.button.ghost,
+      },
+    },
+    _active: {
+      bgColor: color.background.button['ghost-active'],
+    },
+    _focusVisible: {
+      ring: '2px',
+      ringColor: color.border.wcag,
+      ringOffset: '1px',
+    },
+  }),
+  defaultProps: {
+    size: 'md',
+  },
+}

package/lib/theme/components/color-picker/index.ts

@@ -0,0 +1,58 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+import { getContrastColor } from '../../../utils'
+
+export const ColorPicker: ComponentMultiStyleConfig = {
+  parts: [ 'colorButton', 'trigger', 'heading' ],
+  baseStyle: ({ theme, selectedColor }) => {
+    const { sizes: sizing, colors: color } = theme
+    return ({
+      heading: {
+        border: 'none',
+        paddingInlineStart: sizing['4'],
+        paddingInlineEnd: sizing['2'],
+        paddingBottom: sizing['0'],
+        fontSize: 'md',
+        fontWeight: 'semibold',
+      },
+      trigger: {
+        bgColor: selectedColor ?? color.background.button.default,
+        color: selectedColor ? getContrastColor(selectedColor) : 'unset',
+        _hover: {
+          bgColor: selectedColor ?? color.background.button['default-hover'],
+        },
+        _active: {
+          bgColor: selectedColor ?? color.background.button['default-active'],
+        },
+      },
+      colorButton: {
+        height: sizing.button.sm,
+        minWidth: sizing.button.sm,
+        _hover: {
+          ring: '2px',
+          ringOffset: '1px',
+          ringColor: `${color.border.input['default-hover']}`,
+        },
+      },
+    })
+  },
+  sizes: {
+    sm: ({ theme: { sizes: sizing } }) => ({
+      trigger: {
+        height: sizing.button.sm,
+        minWidth: sizing.button.sm,
+      },
+    }),
+    md: ({ theme: { sizes: sizing } }) => ({
+      trigger: {
+        height: sizing.button.md,
+        minWidth: sizing.button.md,
+      },
+    }),
+    lg: ({ theme: { sizes: sizing } }) => ({
+      trigger: {
+        height: sizing.button.lg,
+        minWidth: sizing.button.lg,
+      },
+    }),
+  },
+}

package/lib/theme/components/date-picker/index.ts

@@ -0,0 +1,70 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+
+export const DatePicker: ComponentMultiStyleConfig = {
+  parts: [ 'group', 'styledField', 'dateField', 'dateSegment' ],
+  baseStyle: ({ theme: { colors: color, opacity } }) => ({
+    group: {
+      position: 'relative',
+      alignItems: 'center',
+      flex: 1,
+    },
+    styledField: {
+      bgColor: 'background.default',
+      _focusWithin: {
+        bgColor: color.background.input['outline-focus'],
+        borderColor: color.border.textarea.focus,
+        boxShadow: `inset 0 0 0 1px ${color.border.textarea.focus}`,
+      },
+      _invalid: {
+        boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
+        borderColor: color.border.input.error,
+      },
+      _disabled: {
+        bgColor: color.background.input['outline-disabled'],
+        borderColor: color.border.input.disabled,
+        opacity: opacity.input.disabled,
+      },
+    },
+    dateField: {
+      width: '100%',
+      height: '100%',
+      alignItems: 'center',
+    },
+    dateSegment: {
+      caretColor: 'transparent',
+      boxSizing: 'content-box',
+      textAlign: 'center',
+      outline: 'none',
+      rounded: 'md',
+      _focus: {
+        bgColor: 'bg.brand.default',
+        color: color.text.inverted,
+      },
+      _placeholder: {
+        color: 'destructive',
+      },
+    },
+  }),
+  variants: {
+    outline: ({
+      theme: { colors: color, radii: borderRadius, borders: borderWidth },
+    }) => ({
+      styledField: {
+        bgColor: color.background.input['outline-default'],
+        borderRadius: borderRadius.input.outline,
+        borderWidth: borderWidth.input.default,
+        borderColor: color.border.input.default,
+      },
+    }),
+    filled: ({
+      theme: { colors: color, radii: borderRadius, borders: borderWidth },
+    }) => ({
+      styledField: {
+        bgColor: color.background.input['filled-default'],
+        borderRadius: borderRadius.input.filled,
+        borderWidth: borderWidth.input.default,
+        borderColor: color.background.input['filled-default'],
+      },
+    }),
+  },
+}

package/lib/theme/components/drag-and-drop/index.ts

@@ -0,0 +1,23 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+import { merge } from 'ramda'
+
+export const DragAndDrop: ComponentMultiStyleConfig = {
+  parts: [ 'dropZone' ],
+  baseStyle: ({ sx }) => ({
+    dropZone: merge({
+      borderWidth: 'sm',
+      borderStyle: 'dashed',
+      borderColor: 'border.default',
+      padding: '4',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: '4',
+      justifyContent: 'center',
+      textAlign: 'center',
+      minH: '56',
+      minW: '56',
+      bgColor: 'bg.filled',
+    }, sx),
+  }),
+}

package/lib/theme/components/editable-text/index.ts

@@ -0,0 +1,82 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+import { isEmpty, isNil } from 'ramda'
+
+export const EditableText: ComponentMultiStyleConfig = {
+  parts: [ 'button', 'icon', 'controls', 'preview', 'input' ],
+  sizes: {
+    sm: ({ isEditing, theme: { sizes: sizing } }) => ({
+      button: {
+        height: sizing.button.xs,
+        minWidth: sizing.button.xs,
+      },
+      icon: {
+        boxSize: sizing.icon.xs,
+      },
+      controls: {
+        width: !isEditing ? 6 : '3.25rem',
+      },
+      preview: {
+        pt: 1,
+      },
+      input: {
+        paddingInlineEnd: 16,
+        paddingRight: 16,
+      },
+    }),
+    md: ({ isEditing, theme: { sizes: sizing } }) => ({
+      button: {
+        height: sizing.button.sm,
+        minWidth: sizing.button.sm,
+      },
+      icon: {
+        boxSize: sizing.icon.sm,
+      },
+      controls: {
+        width: !isEditing ? 8 : '4.25rem',
+      },
+      preview: {
+        pt: '7px',
+      },
+      input: {
+        paddingInlineEnd: 20,
+        paddingRight: 20,
+      },
+    }),
+    lg: ({ isEditing, theme: { sizes: sizing } }) => ({
+      button: {
+        height: sizing.button.md,
+        minWidth: sizing.button.md,
+      },
+      icon: {
+        boxSize: sizing.icon.md,
+      },
+      controls: {
+        width: !isEditing ? 10 : '5.25rem',
+      },
+      preview: {
+        pt: '8px',
+      },
+      input: {
+        paddingInlineEnd: 24,
+        paddingRight: 24,
+      },
+    }),
+  },
+  baseStyle: ({ value }) => ({
+    controls: {
+      mr: 1,
+    },
+    preview: {
+      fontWeight: 'semibold',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      paddingTop: 0,
+      paddingBottom: 0,
+      color: isNil(value) || isEmpty(value) ? 'text.subdued' : 'text.default',
+    },
+    input: {
+      fontWeight: 'semibold',
+    },
+  }),
+}

package/lib/theme/components/file-picker/index.ts

@@ -0,0 +1,111 @@
+import { ComponentMultiStyleConfig } from '@chakra-ui/react'
+import { CSSObject, keyframes } from '@emotion/react'
+import { merge } from 'ramda'
+import { CurrentTheme } from '../../../utils'
+
+const shakeAnimation = keyframes`
+  0% { transform: translate(1px, 1px) rotate(0deg); }
+  10% { transform: translate(-1px, -2px) rotate(-1deg); }
+  20% { transform: translate(-3px, 0px) rotate(1deg); }
+  30% { transform: translate(3px, 2px) rotate(0deg); }
+  40% { transform: translate(1px, -1px) rotate(1deg); }
+  50% { transform: translate(-1px, 2px) rotate(-1deg); }
+  60% { transform: translate(-3px, 1px) rotate(0deg); }
+  70% { transform: translate(3px, 1px) rotate(-1deg); }
+  80% { transform: translate(-1px, -1px) rotate(1deg); }
+  90% { transform: translate(1px, 2px) rotate(0deg); }
+  100% { transform: translate(1px, -2px) rotate(-1deg); }
+`
+
+const thickRing: CSSObject = {
+  _focusVisible: {
+    outline: 'none',
+    ring: '3px',
+    ringColor: 'border.wcag',
+    ringOffset: '1px',
+  },
+}
+
+const getBgColor = (currentTheme: CurrentTheme) => {
+  switch (currentTheme) {
+    case 'webappTheme': return 'blue.50'
+    case 'tottTheme': return 'blue.900'
+    default: return 'bg.filled'
+  }
+}
+
+const getInvalidColorStyles = (isInvalid: boolean, isImage = true, currentTheme: CurrentTheme = 'webappTheme') => ({
+  borderColor: isInvalid ? 'border.error' : 'border.default',
+  bgColor: isInvalid && 'bg.error.default',
+  animation: isInvalid && `500ms ${shakeAnimation} ease`,
+  _hover: isImage && {
+    bgColor: isInvalid ? 'bg.error.default' : getBgColor(currentTheme),
+    borderColor: isInvalid ? 'border.error' : 'border.brand.default',
+  },
+})
+
+const getAiColorStyles = (isInvalid: boolean, isImage = true) => ({
+  borderColor: isInvalid ? 'border.error' : 'border.default',
+  bgColor: isInvalid && 'bg.error.default',
+  animation: isInvalid && `500ms ${shakeAnimation} ease`,
+  _hover: isImage && {
+    bgColor: isInvalid ? 'bg.error.default' : 'bg.filled',
+    borderColor: isInvalid ? 'border.error' : 'border.ai',
+  },
+})
+
+export const FilePicker: ComponentMultiStyleConfig = {
+  parts: [ 'filePicker', 'fileItem', 'multiFilePicker' ],
+  baseStyle: ({ theme: { sizes, colors }, hasLoaded, isImage, isInvalid, currentTheme, sx }) => ({
+    filePicker: merge({
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 'full',
+      height: '40',
+      textAlign: 'center',
+      position: 'relative',
+      borderWidth: hasLoaded && isImage ? '0' : sizes['0a'],
+      borderStyle: 'dashed',
+      borderRadius: 'lg',
+      ...getInvalidColorStyles(isInvalid, isImage, currentTheme),
+      ...thickRing,
+    }, sx),
+    multiFilePicker: {
+      width: 'full',
+      maxWidth: 'inherit',
+      height: '32',
+      position: 'relative',
+      borderWidth: sizes['0a'],
+      borderStyle: 'dashed',
+      borderRadius: 'lg',
+      ...getInvalidColorStyles(isInvalid, undefined, currentTheme),
+      ...thickRing,
+    },
+    fileItem: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingX: '2',
+      paddingY: '1',
+      borderRadius: sizes['2'],
+      textAlign: 'center',
+      position: 'relative',
+      border: `2px solid ${colors.gray['100']}`,
+      minHeight: '20',
+    },
+  }),
+  variants: {
+    ai: ({ isInvalid }) => ({
+      filePicker: {
+        ...getAiColorStyles(isInvalid),
+      },
+      multiFilePicker: {
+        ...getAiColorStyles(isInvalid),
+      },
+    }),
+
+  },
+}