@airtable/blocks 0.0.0-experimental-3e47d4d04-20250909 → 0.0.0-experimental-e625869e5-20251002

package/dist/esm/base/ui/theme/default_theme/control_sizes.js

@@ -1,96 +0,0 @@
-const sharedControlSizes = {
-  small: {
-    fontSize: 2,
-    // 13px
-    height: '28px',
-    lineHeight: '19px'
-  },
-  default: {
-    fontSize: 2,
-    // 13px
-    height: '32px',
-    lineHeight: '21px'
-  },
-  large: {
-    fontSize: 3,
-    // 15px
-    height: '36px',
-    lineHeight: '21px'
-  }
-};
-export const buttonSizes = {
-  small: {
-    ...sharedControlSizes.small,
-    paddingX: '10px'
-  },
-  default: {
-    ...sharedControlSizes.default,
-    paddingX: '12px'
-  },
-  large: {
-    ...sharedControlSizes.large,
-    paddingX: '14px'
-  }
-};
-export const selectSizes = {
-  small: {
-    ...sharedControlSizes.small,
-    paddingLeft: '8px',
-    paddingRight: '24px',
-    backgroundPosition: 'calc(100% - 8px)'
-  },
-  default: {
-    ...sharedControlSizes.default,
-    paddingLeft: '10px',
-    paddingRight: '26px',
-    backgroundPosition: 'calc(100% - 10px)'
-  },
-  large: {
-    ...sharedControlSizes.large,
-    paddingLeft: '12px',
-    paddingRight: '28px',
-    backgroundPosition: 'calc(100% - 12px)'
-  }
-};
-export const inputSizes = {
-  small: {
-    ...sharedControlSizes.small,
-    paddingX: '8px'
-  },
-  default: {
-    ...sharedControlSizes.default,
-    paddingX: '10px'
-  },
-  large: {
-    ...sharedControlSizes.large,
-    paddingX: '12px'
-  }
-};
-export const selectButtonsSizes = {
-  small: {
-    ...sharedControlSizes.small,
-    padding: 1
-  },
-  default: {
-    ...sharedControlSizes.default,
-    padding: 1
-  },
-  large: {
-    ...sharedControlSizes.large,
-    padding: 1
-  }
-};
-export const switchSizes = {
-  small: {
-    ...sharedControlSizes.small,
-    paddingX: '8px'
-  },
-  default: {
-    ...sharedControlSizes.default,
-    paddingX: '10px'
-  },
-  large: {
-    ...sharedControlSizes.large,
-    paddingX: '12px'
-  }
-};

package/dist/esm/base/ui/theme/default_theme/heading_styles.js

@@ -1,93 +0,0 @@
-/** @hidden */
-
-/** @hidden */
-
-const headingStyles = {
-  default: {
-    xsmall: {
-      fontSize: 3,
-      fontWeight: 700,
-      lineHeight: '22px',
-      textColor: 'default',
-      marginTop: 0,
-      marginBottom: 1
-    },
-    small: {
-      fontSize: 4,
-      fontWeight: 600,
-      lineHeight: '24px',
-      textColor: 'default',
-      marginTop: 0,
-      marginBottom: 1
-    },
-    // We skip fontSize 5, because font sizes below 6 (21px) the font will render SF Pro Text instead of SF Pro Display.
-    // SF Pro Text visually looks slightly bigger than SF Pro Display and 5 and 6 would look very similar.
-    default: {
-      fontSize: 6,
-      fontWeight: 500,
-      lineHeight: '26px',
-      textColor: 'default',
-      marginTop: 0,
-      marginBottom: 2
-    },
-    large: {
-      fontSize: 7,
-      fontWeight: 500,
-      lineHeight: '29px',
-      textColor: 'default',
-      marginTop: 0,
-      marginBottom: 2
-    },
-    xlarge: {
-      fontSize: 8,
-      fontWeight: 500,
-      lineHeight: '34px',
-      textColor: 'default',
-      marginTop: 0,
-      marginBottom: 3
-    },
-    xxlarge: {
-      fontSize: 9,
-      fontWeight: 500,
-      lineHeight: '44px',
-      letterSpacing: '-0.01em',
-      textColor: 'default',
-      marginTop: 0,
-      marginBottom: 3
-    }
-  },
-  caps: {
-    xsmall: {
-      fontSize: 1,
-      fontWeight: 700,
-      lineHeight: '16px',
-      letterSpacing: '0.05em',
-      textTransform: 'uppercase',
-      textColor: 'light',
-      marginTop: 0,
-      marginBottom: 2
-    },
-    small: {
-      fontSize: 2,
-      fontWeight: 600,
-      lineHeight: '16px',
-      letterSpacing: '0.05em',
-      textTransform: 'uppercase',
-      textColor: 'light',
-      marginTop: 0,
-      marginBottom: 2
-    },
-    default: {
-      fontSize: 3,
-      fontWeight: 500,
-      lineHeight: '20px',
-      letterSpacing: '0.05em',
-      textTransform: 'uppercase',
-      textColor: 'light',
-      marginTop: 0,
-      marginBottom: 3
-    }
-    // Bigger all caps heading sizes are are omitted since they are not desirable.
-  }
-};
-export default headingStyles;

package/dist/esm/base/ui/theme/default_theme/index.js

@@ -1,31 +0,0 @@
-import * as tokens from './tokens';
-import * as controlSizes from './control_sizes';
-// Typography sizes and variants
-import textStyles from './text_styles';
-import headingStyles from './heading_styles';
-// Component variants
-import buttonVariants from './button_variants';
-import linkVariants from './link_variants';
-import inputVariants from './input_variants';
-import switchVariants from './switch_variants';
-import selectVariants from './select_variants';
-import selectButtonsVariants from './select_buttons_variants';
-import textButtonVariants from './text_button_variants';
-const theme = {
-  ...tokens,
-  ...controlSizes,
-  textStyles,
-  headingStyles,
-  // We create CSS class names for variants when the UI kit gets loaded.
-  // This means `textButtonVariants.default` is just a CSS class name.
-  // This has the benefit over exporting a style object
-  // of not having to create a class name manually in the render function.
-  buttonVariants,
-  linkVariants,
-  inputVariants,
-  selectVariants,
-  selectButtonsVariants,
-  switchVariants,
-  textButtonVariants
-};
-export default theme;

package/dist/esm/base/ui/theme/default_theme/input_variants.js

@@ -1,32 +0,0 @@
-import { cx, css } from 'emotion';
-import { fontFamilies, colors, radii, opacities } from './tokens';
-const baseInputStyles = css({
-  borderRadius: radii.default,
-  boxSizing: 'border-box',
-  fontFamily: fontFamilies.default,
-  fontWeight: 400,
-  appearance: 'none',
-  outline: 'none',
-  border: 'none',
-  '&:not(:disabled)': {
-    '&:hover': {
-      opacity: opacities.quiet
-    },
-    '&:active': {
-      opacity: 1
-    },
-    '&:focus': {
-      boxShadow: `inset 0 0 0 2px ${colors.darken3}`
-    }
-  },
-  '&:disabled': {
-    opacity: opacities.quieter
-  }
-});
-const inputVariants = {
-  default: cx(baseInputStyles, css({
-    color: colors.dark,
-    backgroundColor: colors.lightGray2
-  }))
-};
-export default inputVariants;

package/dist/esm/base/ui/theme/default_theme/link_variants.js

@@ -1,29 +0,0 @@
-import { css, cx } from 'emotion';
-import { colors, radii, opacities } from './tokens';
-const baseStyles = css({
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: radii.default,
-  outline: 'none',
-  '&:hover': {
-    opacity: opacities.quiet
-  },
-  '&:active': {
-    opacity: 1
-  },
-  '&:focus': {
-    boxShadow: `0 0 0 2px ${colors.darken3}`
-  }
-});
-const linkVariants = {
-  default: cx(baseStyles, css({
-    color: colors.blueBright
-  })),
-  dark: cx(baseStyles, css({
-    color: colors.dark
-  })),
-  light: cx(baseStyles, css({
-    color: colors.light
-  }))
-};
-export default linkVariants;

package/dist/esm/base/ui/theme/default_theme/select_buttons_variants.js

@@ -1,66 +0,0 @@
-import { css } from 'emotion';
-import { fontFamilies, colors, radii, opacities } from './tokens';
-const baseContainerStyles = css({
-  borderRadius: radii.default,
-  backgroundColor: colors.lightGray2,
-  boxSizing: 'border-box',
-  fontFamily: fontFamilies.default,
-  overflow: 'hidden',
-  display: 'flex',
-  userSelect: 'none',
-  fontWeight: 400,
-  '&:active, &[data-focused="true"]': {
-    boxShadow: `inset 0 0 0 2px ${colors.darken3}`
-  },
-  '&[data-disabled="true"]': {
-    opacity: opacities.quieter,
-    cursor: 'default'
-  }
-});
-const baseOptionStyles = css({
-  position: 'relative',
-  display: 'flex',
-  flex: 'auto',
-  flexBasis: 0,
-  justifyContent: 'center',
-  alignItems: 'center',
-  overflow: 'hidden',
-  '> label': {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '100%',
-    height: '100%',
-    borderRadius: radii.default,
-    outline: 0,
-    paddingRight: '4px',
-    paddingLeft: '4px',
-    '&:active': {
-      opacity: 1
-    }
-  },
-  '> input:disabled + label': {
-    cursor: 'default',
-    opacity: opacities.quieter
-  },
-  '> input:not(:disabled) + label': {
-    cursor: 'pointer'
-  },
-  '> input:checked + label': {
-    backgroundColor: colors.darken4,
-    color: colors.white
-  },
-  '> input:not(:checked) + label': {
-    color: colors.dark
-  },
-  '> input:not(:checked):not(:disabled) + label:hover': {
-    opacity: opacities.quiet
-  }
-});
-const selectButtonsVariants = {
-  default: {
-    containerClassNameForVariant: baseContainerStyles,
-    optionClassNameForVariant: baseOptionStyles
-  }
-};
-export default selectButtonsVariants;

package/dist/esm/base/ui/theme/default_theme/select_variants.js

@@ -1,44 +0,0 @@
-import { cx, css } from 'emotion';
-import { fontFamilies, colors, radii, opacities } from './tokens';
-const styleForChevron = {
-  // https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
-  // You can use https://www.npmjs.com/package/mini-svg-data-uri to generate the `background-image` from a svg.
-  backgroundImage: `url("data:image/svg+xml,%3csvg width='7' height='6' viewBox='0 0 7 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M.601.8h4.8a.6.6 0 01.48.96l-2.4 3.2a.6.6 0 01-.96 0l-2.4-3.2A.6.6 0 01.601.8z' fill='rgba(0%2c 0%2c 0%2c 0.5)'/%3e%3c/svg%3e")`,
-  backgroundRepeat: 'no-repeat'
-};
-const baseStyles = css({
-  fontFamily: fontFamilies.default,
-  borderRadius: radii.default,
-  justifyContent: 'center',
-  alignItems: 'center',
-  paddingTop: 0,
-  paddingBottom: 0,
-  fontWeight: 400,
-  outline: 'none',
-  appearance: 'none',
-  border: 'none',
-  ...styleForChevron,
-  '&:not(:disabled)': {
-    cursor: 'pointer',
-    '&:hover': {
-      opacity: opacities.quiet
-    },
-    '&:active': {
-      opacity: 1
-    },
-    '&:focus': {
-      boxShadow: `inset 0 0 0 2px ${colors.darken3}`
-    }
-  },
-  '&:disabled': {
-    cursor: 'default',
-    opacity: opacities.quieter
-  }
-});
-const selectVariants = {
-  default: cx(baseStyles, css({
-    color: colors.dark,
-    backgroundColor: colors.lightGray2
-  }))
-};
-export default selectVariants;

package/dist/esm/base/ui/theme/default_theme/switch_variants.js

@@ -1,78 +0,0 @@
-import { cx, css } from 'emotion';
-import cssHelpers from '../../css_helpers';
-import { space, colors, radii, opacities, fontFamilies } from './tokens';
-const SWITCH_WIDTH = 20;
-const SWITCH_HEIGHT = 12;
-const SWITCH_PADDING = 2;
-const CIRCLE_SIZE = SWITCH_HEIGHT - 2 * SWITCH_PADDING;
-const switchClassName = css({
-  width: CIRCLE_SIZE,
-  height: CIRCLE_SIZE,
-  transition: '0.085s all ease-in',
-  borderRadius: radii.circle,
-  backgroundColor: colors.white
-});
-const switchContainerClassName = css({
-  flex: 'none',
-  width: SWITCH_WIDTH,
-  height: SWITCH_HEIGHT,
-  padding: SWITCH_PADDING,
-  transition: '0.085s all ease-in',
-  boxSizing: 'border-box',
-  borderRadius: radii.circle,
-  backgroundColor: colors.darken2
-});
-const switchLabelClassName = css({
-  cursor: 'inherit',
-  userSelect: 'none',
-  marginLeft: space[2],
-  color: colors.dark,
-  flex: 'auto'
-});
-const baseStyles = css({
-  alignItems: 'center',
-  borderRadius: radii.default,
-  boxSizing: 'border-box',
-  outline: 'none',
-  fontFamily: fontFamilies.default,
-  backgroundColor: colors.lightGray2,
-  '&[aria-disabled="true"]': {
-    opacity: opacities.quieter
-  },
-  '&:not([aria-disabled="true"])': {
-    cursor: 'pointer',
-    '&:hover': {
-      opacity: opacities.quiet
-    },
-    '&:focus': {
-      boxShadow: `inset 0 0 0 2px ${colors.darken3}`
-    }
-  },
-  [`&[aria-checked="true"] .${switchClassName}`]: {
-    transform: 'translateX(100%)'
-  }
-});
-const subcomponentClassNames = {
-  switchClassName,
-  switchContainerClassName,
-  switchLabelClassName: cx(switchLabelClassName, cssHelpers.TRUNCATE)
-};
-const switchVariants = {
-  default: {
-    baseClassName: cx(baseStyles, css({
-      [`&[aria-checked="true"] > .${switchContainerClassName}`]: {
-        backgroundColor: colors.greenBright
-      }
-    })),
-    ...subcomponentClassNames
-  },
-  danger: {
-    baseClassName: cx(baseStyles, css({
-      [`&[aria-checked="true"] > .${switchContainerClassName}`]: {
-        backgroundColor: colors.redBright
-      }
-    })),
-    ...subcomponentClassNames
-  }
-};
-export default switchVariants;

package/dist/esm/base/ui/theme/default_theme/text_button_variants.js

@@ -1,38 +0,0 @@
-import { css, cx } from 'emotion';
-import { colors, radii, opacities, fontWeights } from './tokens';
-const NOT_DISABLED = '&:not([aria-disabled="true"])';
-const DISABLED = '&[aria-disabled="true"]';
-const baseStyles = css({
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: radii.default,
-  outline: 'none',
-  fontWeight: fontWeights.strong,
-  [NOT_DISABLED]: {
-    cursor: 'pointer',
-    '&:hover': {
-      opacity: opacities.quiet
-    },
-    '&:active': {
-      opacity: 1
-    },
-    '&:focus': {
-      boxShadow: `0 0 0 2px ${colors.darken3}`
-    }
-  },
-  [DISABLED]: {
-    opacity: opacities.quieter
-  }
-});
-const textButtonVariants = {
-  default: cx(baseStyles, css({
-    color: colors.blueBright
-  })),
-  dark: cx(baseStyles, css({
-    color: colors.dark
-  })),
-  light: cx(baseStyles, css({
-    color: colors.light
-  }))
-};
-export default textButtonVariants;

package/dist/esm/base/ui/theme/default_theme/text_styles.js

@@ -1,75 +0,0 @@
-const textStyles = {
-  default: {
-    small: {
-      fontSize: 1,
-      lineHeight: '14px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginY: 0
-    },
-    default: {
-      fontSize: 2,
-      lineHeight: '16px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginY: 0
-    },
-    large: {
-      fontSize: 3,
-      lineHeight: '20px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginY: 0
-    },
-    xlarge: {
-      fontSize: 4,
-      lineHeight: '24px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginY: 0
-    }
-  },
-  paragraph: {
-    small: {
-      fontSize: 1,
-      lineHeight: '16px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginTop: 0,
-      marginBottom: '1em'
-    },
-    default: {
-      fontSize: 2,
-      lineHeight: '20px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginTop: 0,
-      marginBottom: '1em'
-    },
-    large: {
-      fontSize: 3,
-      lineHeight: '22px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginTop: 0,
-      marginBottom: '1em'
-    },
-    xlarge: {
-      fontSize: 4,
-      lineHeight: '26px',
-      fontWeight: 400,
-      textColor: 'default',
-      fontFamily: 'default',
-      marginTop: 0,
-      marginBottom: '1em'
-    }
-  }
-};
-export default textStyles;