@teamturing/react-kit 2.14.1 → 2.15.0

package/esm/core/Avatar/index.js

@@ -0,0 +1,68 @@
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import Image from '../Image/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
+
+const Avatar = ({
+  src,
+  alt = '',
+  size = 'm',
+  sx
+}, ref) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseAvatar, {
+  ref: ref,
+  src: src,
+  alt: alt,
+  sx: sx,
+  size: size
+});
+const BaseAvatar = styled(Image)`
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.full)};
+
+  ${variant({
+  prop: 'size',
+  variants: {
+    xxs: {
+      width: 16,
+      height: 16
+    },
+    xs: {
+      width: 20,
+      height: 20
+    },
+    s: {
+      width: 24,
+      height: 24
+    },
+    m: {
+      width: 28,
+      height: 28
+    },
+    l: {
+      width: 32,
+      height: 32
+    },
+    xl: {
+      width: 40,
+      height: 40
+    },
+    xxl: {
+      width: 48,
+      height: 48
+    },
+    xxxl: {
+      width: 64,
+      height: 64
+    }
+  }
+})}
+  ${sx}
+`;
+var index = /*#__PURE__*/forwardRef(Avatar);
+
+export { index as default };

package/esm/core/Checkbox/index.js

@@ -0,0 +1,168 @@
+import { forwardRef, useLayoutEffect } from 'react';
+import styled, { css } from 'styled-components';
+import useProvidedOrCreatedRef from '../../hook/useProvidedOrCreatedRef.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const Checkbox = ({
+  checked,
+  validationStatus,
+  indeterminate = false,
+  ...props
+}, ref) => {
+  const checkboxRef = useProvidedOrCreatedRef(ref);
+  useLayoutEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.indeterminate = indeterminate || false;
+    }
+  }, [indeterminate, checked, checkboxRef]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseCheckbox, {
+    ref: checkboxRef,
+    checked: checked,
+    validationStatus: validationStatus,
+    ...props
+  });
+};
+const UnstyledCheckbox = styled.input.attrs({
+  type: 'checkbox'
+})`
+  appearance: none;
+
+  ${sx}
+`;
+const BaseCheckbox = styled(UnstyledCheckbox)`
+  position: relative;
+
+  width: ${forcePixelValue(20)};
+  height: ${forcePixelValue(20)};
+
+  border-width: ${forcePixelValue(2)};
+  border-style: solid;
+  border-color: ${({
+  theme
+}) => theme.colors['border/neutral']};
+  border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.xxs)}`};
+  cursor: pointer;
+
+  transition: visibility 200ms;
+
+  &::before {
+    visibility: hidden;
+
+    content: '';
+    display: grid;
+    position: absolute;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    border-radius: ${({
+  theme
+}) => `${forcePixelValue(theme.radii.xxs)}`};
+
+    background-color: ${({
+  theme
+}) => theme.colors['icon/inverse']};
+    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6 17.2C10.3 17.2 10 17.1 9.80001 16.8L5.20001 12.2C4.70001 11.7 4.70001 11 5.20001 10.5C5.70001 9.99998 6.40001 9.99998 6.90001 10.5L10.6 14.2L17.2 7.59998C17.7 7.09998 18.4 7.09998 18.9 7.59998C19.4 8.09998 19.4 8.79998 18.9 9.29998L11.5 16.7C11.2 17.1 10.9 17.2 10.6 17.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
+    mask-size: 100%;
+    -webkit-mask-size: 100%;
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-position: center;
+  }
+
+  &:disabled {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/disabled']};
+    border-color: ${({
+  theme
+}) => theme.colors['border/disabled']};
+  }
+
+  &:checked {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/primary']};
+    border-width: 0;
+
+    &::before {
+      visibility: visible;
+    }
+
+    &:disabled {
+      background-color: ${({
+  theme
+}) => theme.colors['bg/disabled']};
+      border-color: ${({
+  theme
+}) => theme.colors['border/disabled']};
+
+      &::before {
+        background-color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
+      }
+    }
+  }
+
+  &:indeterminate {
+    background-color: ${({
+  theme
+}) => theme.colors['bg/primary']};
+    border-width: 0;
+
+    &::before {
+      visibility: visible;
+      mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.05 13.2H4.05001C3.73175 13.2 3.42652 13.0736 3.20148 12.8485C2.97643 12.6235 2.85001 12.3182 2.85001 12C2.85001 11.6817 2.97643 11.3765 3.20148 11.1515C3.42652 10.9264 3.73175 10.8 4.05001 10.8H20.05C20.3683 10.8 20.6735 10.9264 20.8985 11.1515C21.1236 11.3765 21.25 11.6817 21.25 12C21.25 12.3182 21.1236 12.6235 20.8985 12.8485C20.6735 13.0736 20.3683 13.2 20.05 13.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.05 13.2H4.05001C3.73175 13.2 3.42652 13.0736 3.20148 12.8485C2.97643 12.6235 2.85001 12.3182 2.85001 12C2.85001 11.6817 2.97643 11.3765 3.20148 11.1515C3.42652 10.9264 3.73175 10.8 4.05001 10.8H20.05C20.3683 10.8 20.6735 10.9264 20.8985 11.1515C21.1236 11.3765 21.25 11.6817 21.25 12C21.25 12.3182 21.1236 12.6235 20.8985 12.8485C20.6735 13.0736 20.3683 13.2 20.05 13.2Z' fill='%238D94A0'/%3E%3C/svg%3E%0A");
+      mask-size: 100%;
+      -webkit-mask-size: 100%;
+      mask-repeat: no-repeat;
+      -webkit-mask-repeat: no-repeat;
+      mask-position: center;
+      -webkit-mask-position: center;
+    }
+
+    &:disabled {
+      background-color: ${({
+  theme
+}) => theme.colors['bg/disabled']};
+      border-color: ${({
+  theme
+}) => theme.colors['border/disabled']};
+
+      &::before {
+        background-color: ${({
+  theme
+}) => theme.colors['icon/disabled']};
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline-width: ${forcePixelValue(2)};
+    outline-style: solid;
+    outline-color: ${({
+  theme
+}) => theme.colors['border/focused']};
+  }
+
+  ${props => props.validationStatus === 'error' && css`
+      border-color: ${({
+  theme
+}) => theme.colors['border/danger']};
+    `}
+
+  ${sx}
+`;
+var index = /*#__PURE__*/forwardRef(Checkbox);
+
+export { index as default };

package/esm/core/Datagrid/DatagridBody.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { sx } from '../../utils/styled-system/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DatagridBody = ({
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseDatagridBody, {
+  ...props
+});
+const BaseDatagridBody = styled.div`
+  width: inherit;
+
+  ${sx}
+`;
+
+export { DatagridBody as default };

package/esm/core/Datagrid/DatagridCell.js

@@ -0,0 +1,13 @@
+import Grid from '../Grid/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DatagridCell = ({
+  children,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(BaseDatagridCell, {
+  ...props,
+  children: children
+});
+const BaseDatagridCell = Grid.Unit;
+
+export { DatagridCell as default };

package/esm/core/Datagrid/DatagridHeader.js

@@ -0,0 +1,41 @@
+import { r as reactIsExports } from '../../node_modules/react-is/index.js';
+import styled from 'styled-components';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import View from '../View/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DatagridHeader = ({
+  leadingVisual: LeadingVisual,
+  trailingAction,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsxs(DataGridHeaderWrapper, {
+  ...props,
+  children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
+    sx: {
+      fontSize: 'xs',
+      fontWeight: 'medium',
+      lineHeight: 2,
+      color: 'text/neutral/subtle'
+    },
+    children: typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual
+  }), /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+    children: trailingAction
+  })]
+});
+const DataGridHeaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[1])} ${forcePixelValue(theme.space[4])}`};
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral']};
+
+  ${sx}
+`;
+
+export { DatagridHeader as default };

package/esm/core/Datagrid/DatagridRow.js

@@ -0,0 +1,26 @@
+import Grid from '../Grid/index.js';
+import Space from '../Space/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DatagridRow = ({
+  gapX = 2,
+  alignItems,
+  justifyContent,
+  sx,
+  children,
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(DatagridRowWrapper, {
+  ...props,
+  children: /*#__PURE__*/jsxRuntimeExports.jsx(BaseDatagridRow, {
+    wrap: false,
+    gapX: gapX,
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    sx: sx,
+    children: children
+  })
+});
+const BaseDatagridRow = Grid;
+const DatagridRowWrapper = Space;
+
+export { DatagridRow as default };

package/esm/core/Datagrid/index.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import useRelocation from '../../hook/useRelocation.js';
+import { forcePixelValue } from '../../utils/forcePixelValue.js';
+import { sx } from '../../utils/styled-system/index.js';
+import DatagridBody from './DatagridBody.js';
+import DatagridCell from './DatagridCell.js';
+import DatagridHeader from './DatagridHeader.js';
+import DatagridRow from './DatagridRow.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const Datagrid = ({
+  children,
+  sx,
+  ...props
+}) => {
+  const [relocatableComponentsObject, restConmponents] = useRelocation({
+    children,
+    config: {
+      header: DatagridHeader
+    }
+  });
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(DatagridWrapper, {
+    sx: sx,
+    children: [relocatableComponentsObject.header, /*#__PURE__*/jsxRuntimeExports.jsx(BaseDatagrid, {
+      ...props,
+      children: restConmponents
+    })]
+  });
+};
+const DatagridWrapper = styled.div`
+  width: 100%;
+
+  border-width: ${forcePixelValue(1)};
+  border-style: solid;
+  border-color: ${({
+  theme
+}) => theme.colors['border/neutral']};
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.s)};
+  overflow: hidden;
+  isolation: isolate;
+
+  ${sx}
+`;
+const BaseDatagrid = styled.div`
+  width: inherit;
+`;
+var index = Object.assign(Datagrid, {
+  Header: DatagridHeader,
+  Body: DatagridBody,
+  Row: DatagridRow,
+  Cell: DatagridCell
+});
+
+export { index as default };

package/esm/core/DescriptionList/index.js

@@ -0,0 +1,70 @@
+import { isNullable } from '../../utils/isNullable.js';
+import Grid from '../Grid/index.js';
+import ItemList from '../ItemList/index.js';
+import StyledIcon from '../StyledIcon/index.js';
+import Text from '../Text/index.js';
+import View from '../View/index.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+const DescriptionList = ({
+  item,
+  itemDescriptions,
+  renderTitle = title => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+    typography: 'xs',
+    color: 'text/neutral/subtler',
+    children: title
+  }),
+  renderDescription = description => /*#__PURE__*/jsxRuntimeExports.jsx(Text, {
+    typography: 'xs',
+    color: 'text/neutral',
+    children: description
+  }),
+  picks,
+  gapX = 2,
+  gapY = 1,
+  gapItem = 3,
+  titleUnitSize = [1, 1 / 8, 1 / 8],
+  descriptionUnitSize = [1, 7 / 8, 7 / 8],
+  ...props
+}) => /*#__PURE__*/jsxRuntimeExports.jsx(ItemList, {
+  items: picks.map(pick => itemDescriptions[pick]),
+  renderItem: ({
+    icon,
+    title,
+    renderValue
+  }) => {
+    const description = renderValue(item);
+    return /*#__PURE__*/jsxRuntimeExports.jsxs(Grid, {
+      gapX: gapX,
+      gapY: gapY,
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Grid.Unit, {
+        size: titleUnitSize,
+        children: /*#__PURE__*/jsxRuntimeExports.jsxs(View, {
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'nowrap',
+          sx: {
+            columnGap: 1
+          },
+          children: [icon ? /*#__PURE__*/jsxRuntimeExports.jsx(StyledIcon, {
+            icon: icon,
+            size: 16,
+            color: 'icon/neutral'
+          }) : null, renderTitle(title)]
+        })
+      }), /*#__PURE__*/jsxRuntimeExports.jsx(Grid.Unit, {
+        size: descriptionUnitSize,
+        children: renderDescription(!isNullable(description) ? description : '-')
+      })]
+    });
+  },
+  renderItemWrapper: (children, _, i) => /*#__PURE__*/jsxRuntimeExports.jsx(View, {
+    sx: {
+      marginTop: i > 0 ? gapItem : 0
+    },
+    children: children
+  }, i),
+  ...props
+});
+
+export { DescriptionList as default };

package/esm/core/Pill/index.js

@@ -16,6 +16,7 @@ const Pill = ({
   variant = 'secondary',
   leadingVisual: LeadingVisual,
   onRemove,
+  removeIcon: RemoveIcon = SvgClose,
   ...props
 }, ref) => /*#__PURE__*/jsxRuntimeExports.jsxs(BasePill, {
   ref: ref,
@@ -24,11 +25,14 @@ const Pill = ({
   hasLeadingVisual: !isNullable(LeadingVisual),
   hasRemoveButton: !isNullable(onRemove),
   ...props,
-  children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, text, onRemove ? /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledButton, {
+  children: [typeof LeadingVisual !== 'string' && reactIsExports.isValidElementType(LeadingVisual) ? /*#__PURE__*/jsxRuntimeExports.jsx(LeadingVisual, {}) : LeadingVisual, /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+    title: text,
+    children: text
+  }), onRemove ? /*#__PURE__*/jsxRuntimeExports.jsx(UnstyledButton, {
     type: 'button',
     onClick: onRemove,
     "aria-label": 'Remove Pill',
-    children: /*#__PURE__*/jsxRuntimeExports.jsx(SvgClose, {})
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(RemoveIcon, {})
   }) : null]
 });
 const BasePill = styled.span`
@@ -38,6 +42,13 @@ const BasePill = styled.span`
   theme
 }) => forcePixelValue(theme.radii.xxs)};
 
+  & span {
+    max-width: 240px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: pre;
+    word-break: break-all;
+  }
   & > button {
     display: flex;
     transition: background-color 100ms;
@@ -62,7 +73,7 @@ const BasePill = styled.span`
       'lineHeight': theme.lineHeights[2],
       'columnGap': 1,
       '& svg': {
-        width: 16,
+        minWidth: 16,
         height: 16,
         color: theme.colors['icon/primary']
       },
@@ -79,7 +90,7 @@ const BasePill = styled.span`
       'lineHeight': theme.lineHeights[2],
       'columnGap': 0.5,
       '& svg': {
-        width: 16,
+        minWidth: 16,
         height: 16,
         color: theme.colors['icon/primary']
       },
@@ -96,7 +107,7 @@ const BasePill = styled.span`
       'lineHeight': theme.lineHeights[2],
       'columnGap': 0.5,
       '& svg': {
-        width: 12,
+        minWidth: 12,
         height: 12,
         color: theme.colors['icon/primary']
       },